@affinda/wc 0.0.20 → 0.0.21

package/dist/esm/af-nav-accordion-item.entry.js

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

package/dist/esm/af-nav-accordion.entry.js

@@ -70,7 +70,7 @@ const AfNavAccordion = class {
         this.syncItems();
     }
     render() {
-        return (h(Host, { key: '891409dbe4cbb089085aa5b942c5f3c9f4a9bfe5', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'b52051c0d7df92a5bc34400b55156fb638acbccc', class: "nav-accordion" }, h("slot", { key: '86cbd9894e0c8bb44d8001a53df01822b8806542' }))));
+        return (h(Host, { key: 'e60e0f40da03dce1a766a880f1f3649dd957b63e', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'e80e79b012c3060a9fdfcec22af050eb5d063648', class: "nav-accordion" }, h("slot", { key: '234d41321e32046d3d439a93a544c0325b0a02a8' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/af-nav-menu-nest.entry.js

@@ -33,7 +33,7 @@ const AfNavMenuNest = class {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: '3b620840709c0494cc1bb11c1881824550b18611' }, h("div", { key: '7291119d7c8cebea30375f4c301885290413b4b4', class: classes }, h("div", { key: '270b6882e07b3b44bb3b4a0cd9c6b7b063faffa4', class: "menu-columns" }, h("slot", { key: 'f82540660813779579dfc1ba76bbc0e892cfae15' })), h("div", { key: 'e27257bae1cc4bd458c5f19a29d4bbaee41f5a5a', class: "menu-sidebar" }, h("slot", { key: '23e7fe51b7c1094edf89faca812e29bd74044381', name: "sidebar" })))));
+        return (h(Host, { key: '90fbee205d076ffd9884122101a2f337088d6cd6' }, h("div", { key: '49e9b2290833f5200119d2cac7d4381e74eddbec', class: classes }, h("div", { key: '148790bd4481d662149913a6b53e248c4ff49f95', class: "menu-columns" }, h("slot", { key: '7790aa268c060cc8253bab3dc08c9de0819eb39a' })), h("div", { key: '393ed046ddcd717e4d1dd8a2e9df0332f1612238', class: "menu-sidebar" }, h("slot", { key: 'cb61c9744b070aaf2bcbbbf2b402664e41e2866c', name: "sidebar" })))));
     }
 };
 AfNavMenuNest.style = afNavMenuNestCss;

package/dist/esm/af-nav-menu.entry.js

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

package/dist/esm/af-number-badge.entry.js

@@ -28,7 +28,7 @@ const AfNumberBadge = class {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (h(Host, { key: 'f8c10410f86461a7c91c7a4ec581df66378a0064', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'd84893da541132b58c86575aeec8975b3d583e92', class: {
+        return (h(Host, { key: '6d275b5b5e029c0d34508dca9cd674cfcc686130', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'd158b8c0139ac46b892170859ae0d0c43ec2eb9a', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));

package/dist/esm/af-progress-line.entry.js

@@ -19,10 +19,10 @@ const AfProgressLine = class {
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: '62410fb52d8010a3544e4aff10587e656162eb50' }, h("div", { key: '35ecb7c0c89d305456aa07a1db34fa0cf41e9181', class: {
+        return (h(Host, { key: 'c02fe013e512c135c429737c54cb13816b477dbf' }, h("div", { key: 'c2928397950acd9ea039fc438feeda4b57a5bc80', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'd5c61725e5797df2d16555b2035aa58477622b07', class: "progress-line__background" }), h("div", { key: '983d07564432e4f6699dd820a304fd10935e952d', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '877171e53e77401204bedef2bd44d48a70fdf20b', class: "progress-line__background" }), h("div", { key: '86857483735bc4072be844266cc5939b0943fb22', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
 };
 AfProgressLine.style = afProgressLineCss;

package/dist/esm/af-section.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-B0LVveHp.js';
 
-const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-none.sc-af-section{padding:0}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.theme-white.sc-af-section{background-color:var(--colour-brand-white, #FFFFFF);--af-background-base:var(--colour-brand-white, #FFFFFF);--af-background-base-hover:var(--colour-mistgreen-100, #f4f7f6);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed);--af-background-level-1-hover:var(--colour-mistgreen-300, #dde6e3);--af-background-border-subtle:var(--colour-mistgreen-200, #e8eeed);--af-background-border-default:var(--colour-mistgreen-400, #d1ddda);--af-background-border-heavy:var(--colour-mistgreen-500, #c6d5d1);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--af-background-base:var(--colour-brand-inkwell, #14343b);--af-background-base-hover:var(--colour-inkwell-600, #102a2f);--af-background-contrast:var(--colour-inkwell-700, #102a2f);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-background-level-1-hover:var(--colour-inkwell-400, #2b484f);--af-background-border-subtle:var(--colour-inkwell-450, #203e45);--af-background-border-default:var(--colour-inkwell-400, #2b484f);--af-background-border-heavy:var(--colour-inkwell-700, #102a2f);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-white, #ffffff);--af-background-icon-accent:var(--colour-brand-ice, #a6fffb);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-tertiary-text:var(--colour-brand-white, #ffffff);--af-button-tertiary-icon:var(--colour-brand-white, #ffffff);--af-button-tertiary-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-section{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-background-base:var(--colour-brand-mist-green, #c6d5d1);--af-background-base-hover:var(--colour-mistgreen-600, #b2c0bc);--af-background-contrast:var(--colour-brand-soft-clay, #b09670);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3);--af-background-level-1-hover:var(--colour-mistgreen-400, #d1ddda);--af-background-border-subtle:var(--colour-mistgreen-600, #b2c0bc);--af-background-border-default:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-heavy:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-section{background-color:var(--colour-softclay-400, #c0ab8d);--af-background-base:var(--colour-softclay-400, #c0ab8d);--af-background-base-hover:var(--colour-softclay-500, #b09670);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-softclay-500, #b09670);--af-background-level-1-hover:var(--colour-softclay-600, #9e8765);--af-background-border-subtle:var(--colour-softclay-600, #9e8765);--af-background-border-default:var(--colour-softclay-700, #8d785a);--af-background-border-heavy:var(--colour-brand-inkwell, #14343b);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-section{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base-hover:var(--colour-ivory-100, #fff5e0);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-ivory-200, #ffefcc);--af-background-level-1-hover:var(--colour-ivory-300, #ffe9b8);--af-background-border-subtle:var(--colour-ivory-200, #ffefcc);--af-background-border-default:var(--colour-ivory-400, #ffe3a3);--af-background-border-heavy:var(--colour-brand-soft-clay, #b09670);--af-background-border-active:var(--colour-brand-soft-clay, #b09670);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
+const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-none.sc-af-section{padding:0}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.theme-white.sc-af-section{background-color:var(--colour-brand-white, #FFFFFF);--af-background-base:var(--colour-brand-white, #FFFFFF);--af-background-base-hover:var(--colour-mistgreen-100, #f4f7f6);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed);--af-background-level-1-hover:var(--colour-mistgreen-300, #dde6e3);--af-background-border-subtle:var(--colour-mistgreen-200, #e8eeed);--af-background-border-default:var(--colour-mistgreen-400, #d1ddda);--af-background-border-heavy:var(--colour-mistgreen-500, #c6d5d1);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--af-background-base:var(--colour-brand-inkwell, #14343b);--af-background-base-hover:var(--colour-inkwell-600, #102a2f);--af-background-contrast:var(--colour-inkwell-700, #102a2f);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-background-level-1-hover:var(--colour-inkwell-400, #2b484f);--af-background-border-subtle:var(--colour-inkwell-450, #203e45);--af-background-border-default:var(--colour-inkwell-400, #2b484f);--af-background-border-heavy:var(--colour-inkwell-700, #102a2f);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-white, #ffffff);--af-background-icon-accent:var(--colour-brand-ice, #a6fffb);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-button-ghost-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-section{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-background-base:var(--colour-brand-mist-green, #c6d5d1);--af-background-base-hover:var(--colour-mistgreen-600, #b2c0bc);--af-background-contrast:var(--colour-brand-soft-clay, #b09670);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3);--af-background-level-1-hover:var(--colour-mistgreen-400, #d1ddda);--af-background-border-subtle:var(--colour-mistgreen-600, #b2c0bc);--af-background-border-default:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-heavy:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-section{background-color:var(--colour-softclay-400, #c0ab8d);--af-background-base:var(--colour-softclay-400, #c0ab8d);--af-background-base-hover:var(--colour-softclay-500, #b09670);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-softclay-500, #b09670);--af-background-level-1-hover:var(--colour-softclay-600, #9e8765);--af-background-border-subtle:var(--colour-softclay-600, #9e8765);--af-background-border-default:var(--colour-softclay-700, #8d785a);--af-background-border-heavy:var(--colour-brand-inkwell, #14343b);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-section{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base-hover:var(--colour-ivory-100, #fff5e0);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-ivory-200, #ffefcc);--af-background-level-1-hover:var(--colour-ivory-300, #ffe9b8);--af-background-border-subtle:var(--colour-ivory-200, #ffefcc);--af-background-border-default:var(--colour-ivory-400, #ffe3a3);--af-background-border-heavy:var(--colour-brand-soft-clay, #b09670);--af-background-border-active:var(--colour-brand-soft-clay, #b09670);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
 
 const AfSection = class {
     constructor(hostRef) {
@@ -13,8 +13,8 @@ const AfSection = class {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'd08857f705f1719acd32eef6eb4e4262f2154a60' });
-        return (h(Host, { key: 'b7b0793c5ed8011582774bfb30758ef1883731a0' }, h("div", { key: 'fe61281c91d794df34b64a48d7142ad8cd70a204', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: '74f4713c82729d58a7ccfed5f3183194b48d685b' });
+        return (h(Host, { key: '36e27c7f0d0b291bd926fa2bc502e69a7ee3b474' }, h("div", { key: '427262c5593a435dcb0ff78344e9d31d6ec65385', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
 };
 AfSection.style = afSectionCss;

package/dist/esm/af-section.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-section.entry.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":["/**\n * Section Component Styles\n * \n * Provides themed containers with proper spacing.\n * Theme classes set CSS custom properties that child components consume.\n */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.section {\n  width: 100%;\n  position: relative;\n}\n\n/* Padding variants */\n.padding-none {\n  padding: 0;\n}\n\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n   WHITE THEME\n   ========================================================================== */\n\n.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-white, #FFFFFF);\n  --af-background-base-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-level-1-hover: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-border-subtle: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-border-default: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-heavy: var(--colour-mistgreen-500, #c6d5d1);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-mistgreen-200, #e8ebeb);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-mistgreen-500, #d0d6d8);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-mistgreen-500, #d0d6d8);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   INKWELL THEME (Dark)\n   ========================================================================== */\n\n.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-inkwell, #14343b);\n  --af-background-base-hover: var(--colour-inkwell-600, #102a2f);\n  --af-background-contrast: var(--colour-inkwell-700, #102a2f);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  --af-background-level-1-hover: var(--colour-inkwell-400, #2b484f);\n  --af-background-border-subtle: var(--colour-inkwell-450, #203e45);\n  --af-background-border-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-border-heavy: var(--colour-inkwell-700, #102a2f);\n  --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-background-icon-default: var(--colour-brand-white, #ffffff);\n  --af-background-icon-accent: var(--colour-brand-ice, #a6fffb);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);\n  --af-typography-body-dark: var(--colour-brand-white, #ffffff);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-inkwell-450, #203e45);\n  --af-input-bg-hover: var(--colour-inkwell-400, #2b484f);\n  --af-input-bg-disabled: var(--colour-inkwell-600, #102a2f);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--colour-brand-ice, #a6fffb);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* ==========================================================================\n   MIST-GREEN THEME\n   ========================================================================== */\n\n.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-base-hover: var(--colour-mistgreen-600, #b2c0bc);\n  --af-background-contrast: var(--colour-brand-soft-clay, #b09670);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-level-1-hover: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-subtle: var(--colour-mistgreen-600, #b2c0bc);\n  --af-background-border-default: var(--colour-mistgreen-700, #9eaaa7);\n  --af-background-border-heavy: var(--colour-mistgreen-700, #9eaaa7);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-mistgreen-300, #dde6e3);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-mistgreen-600, #b2c0bc);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   SOFT-CLAY THEME\n   ========================================================================== */\n\n.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-softclay-400, #c0ab8d);\n  --af-background-base-hover: var(--colour-softclay-500, #b09670);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n  --af-background-level-1-hover: var(--colour-softclay-600, #9e8765);\n  --af-background-border-subtle: var(--colour-softclay-600, #9e8765);\n  --af-background-border-default: var(--colour-softclay-700, #8d785a);\n  --af-background-border-heavy: var(--colour-brand-inkwell, #14343b);\n  --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-softclay-300, #d0c1a8);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-softclay-700, #8d785a);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-softclay-600, #9e8765);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   WHITE-IVORY THEME\n   ========================================================================== */\n\n.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-background-base-hover: var(--colour-ivory-100, #fff5e0);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n  --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);\n  --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);\n  --af-background-border-default: var(--colour-ivory-400, #ffe3a3);\n  --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);\n  --af-background-border-active: var(--colour-brand-soft-clay, #b09670);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-ivory-100, #fff5e0);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-ivory-200, #ffefcc);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-ivory-400, #ffe3a3);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-ivory-300, #ffe9b8);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'none' | 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} theme-${this.theme}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,iogBAAiogB;;MCYzogB,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAA2C,SAAS;;AAG3D,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;;AAGjF,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAC9D,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}
+{"version":3,"file":"af-section.entry.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":["/**\n * Section Component Styles\n * \n * Provides themed containers with proper spacing.\n * Theme classes set CSS custom properties that child components consume.\n */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.section {\n  width: 100%;\n  position: relative;\n}\n\n/* Padding variants */\n.padding-none {\n  padding: 0;\n}\n\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n   WHITE THEME\n   ========================================================================== */\n\n.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-white, #FFFFFF);\n  --af-background-base-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-level-1-hover: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-border-subtle: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-border-default: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-heavy: var(--colour-mistgreen-500, #c6d5d1);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-mistgreen-200, #e8ebeb);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-mistgreen-500, #d0d6d8);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-mistgreen-500, #d0d6d8);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   INKWELL THEME (Dark)\n   ========================================================================== */\n\n.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-inkwell, #14343b);\n  --af-background-base-hover: var(--colour-inkwell-600, #102a2f);\n  --af-background-contrast: var(--colour-inkwell-700, #102a2f);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  --af-background-level-1-hover: var(--colour-inkwell-400, #2b484f);\n  --af-background-border-subtle: var(--colour-inkwell-450, #203e45);\n  --af-background-border-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-border-heavy: var(--colour-inkwell-700, #102a2f);\n  --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-background-icon-default: var(--colour-brand-white, #ffffff);\n  --af-background-icon-accent: var(--colour-brand-ice, #a6fffb);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);\n  --af-typography-body-dark: var(--colour-brand-white, #ffffff);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  \n  /* Button - Tertiary */\n  --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-stroke: var(--colour-brand-ice, #A6FFFB);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-inkwell-450, #203e45);\n  --af-input-bg-hover: var(--colour-inkwell-400, #2b484f);\n  --af-input-bg-disabled: var(--colour-inkwell-600, #102a2f);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--colour-brand-ice, #a6fffb);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* ==========================================================================\n   MIST-GREEN THEME\n   ========================================================================== */\n\n.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-base-hover: var(--colour-mistgreen-600, #b2c0bc);\n  --af-background-contrast: var(--colour-brand-soft-clay, #b09670);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-level-1-hover: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-subtle: var(--colour-mistgreen-600, #b2c0bc);\n  --af-background-border-default: var(--colour-mistgreen-700, #9eaaa7);\n  --af-background-border-heavy: var(--colour-mistgreen-700, #9eaaa7);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-mistgreen-300, #dde6e3);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-mistgreen-600, #b2c0bc);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   SOFT-CLAY THEME\n   ========================================================================== */\n\n.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-softclay-400, #c0ab8d);\n  --af-background-base-hover: var(--colour-softclay-500, #b09670);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n  --af-background-level-1-hover: var(--colour-softclay-600, #9e8765);\n  --af-background-border-subtle: var(--colour-softclay-600, #9e8765);\n  --af-background-border-default: var(--colour-softclay-700, #8d785a);\n  --af-background-border-heavy: var(--colour-brand-inkwell, #14343b);\n  --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-softclay-300, #d0c1a8);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-softclay-700, #8d785a);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-softclay-600, #9e8765);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   WHITE-IVORY THEME\n   ========================================================================== */\n\n.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-background-base-hover: var(--colour-ivory-100, #fff5e0);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n  --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);\n  --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);\n  --af-background-border-default: var(--colour-ivory-400, #ffe3a3);\n  --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);\n  --af-background-border-active: var(--colour-brand-soft-clay, #b09670);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\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-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-ivory-100, #fff5e0);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-ivory-200, #ffefcc);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-ivory-400, #ffe3a3);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-ivory-300, #ffe9b8);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'none' | 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} theme-${this.theme}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,olgBAAolgB;;MCY5lgB,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAA2C,SAAS;;AAG3D,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;;AAGjF,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAC9D,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}

package/dist/esm/af-show.entry.js

@@ -12,7 +12,7 @@ const AfShow = class {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (h(Host, { key: '5a0c140b0fedd180f13574de1db5ac4fe1652e08', class: classes }, h("slot", { key: '8d0dbb6fde0e28ffb98cd1721f7ad1b917451826' })));
+        return (h(Host, { key: 'b9ae4d8ee02b569e5f0fcb7c1c11105950f11120', class: classes }, h("slot", { key: '5fef11e5c6c5aed8f09a407df0ec506e15534054' })));
     }
 };
 AfShow.style = afShowCss;

package/dist/esm/af-social-link.entry.js

@@ -29,7 +29,7 @@ const AfSocialLink = class {
         }
     }
     render() {
-        return (h(Host, { key: 'a34a9d296e864b2998ea3a6af258bce827544194' }, h("a", { key: '711f8ee451a6b2a07588e063e179edac7214e439', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (h(Host, { key: '85c3c2afa94eec43f1084325ad8c6a2465981af2' }, h("a", { key: '56a20274cbd345f6a05f1061f047eb6d0bcd1d3d', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
     }
 };
 AfSocialLink.style = afSocialLinkCss;

package/dist/esm/af-spacer.entry.js

@@ -34,7 +34,7 @@ const AfSpacer = class {
                 style.height = sizeValue;
             }
         }
-        return h(Host, { key: 'c60e80c17eda7eeaa684768dd13550baf58be226', style: style, "aria-hidden": "true" });
+        return h(Host, { key: 'e9bfa59d6fae975e69b585ef9faf678026c377b4', style: style, "aria-hidden": "true" });
     }
 };
 AfSpacer.style = afSpacerCss;

package/dist/esm/af-split-section.entry.js

@@ -23,14 +23,14 @@ const AfSplitSection = class {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: '1e72b3613568a42bcb4a603825ff716d2fdab8aa' });
+        const content = h("slot", { key: '6db49b19f254218829063d943dc1955a309ce38d' });
         // Create the split background using CSS gradient
         const topColor = themeColors[this.topTheme];
         const bottomColor = themeColors[this.bottomTheme];
         const backgroundStyle = {
             background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`
         };
-        return (h(Host, { key: '334e732a7fe24da3d0886181126ff89403dfc3b0' }, h("div", { key: '1d19ad0564ddd961530be370875248e81f12dc3a', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
+        return (h(Host, { key: '41c4805bb4c94df48c0002ab36e07146b51680c7' }, h("div", { key: 'd1ca45cd59fb86c5c6f37d8d74afc9eefa8ade16', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
     }
 };
 AfSplitSection.style = afSplitSectionCss;

package/dist/esm/af-stack.entry.js

@@ -53,7 +53,7 @@ const AfStack = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: 'd2c22f8cb4b9a822933146ac8d16c7ffc6d64a20', style: style }, h("slot", { key: '7c43d9510e06547e5ca3bc96c201340d73439884' })));
+        return (h(Host, { key: 'bbb0562779cd8b779aeccad01944d36402c514c9', style: style }, h("slot", { key: '8c2dff16adc75e6ba516394990eb808783d21e39' })));
     }
 };
 AfStack.style = afStackCss;

package/dist/esm/af-stepper-step.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-B0LVveHp.js';
+
+const afStepperStepCss = ".sc-af-stepper-step-h{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;min-width:0;padding:0 16px;position:relative;z-index:1}.stepper-step__badge.sc-af-stepper-step{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:var(--colour-background-white, #ffffff);display:inline-flex;align-items:center;justify-content:center;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:500;font-size:20px;color:var(--colour-brand-inkwell, #14343b);margin-bottom:24px;flex-shrink:0}.stepper-step__content.sc-af-stepper-step{display:flex;flex-direction:column;gap:12px;max-width:320px}.stepper-step__heading.sc-af-stepper-step{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b))}.stepper-step__body.sc-af-stepper-step{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:1.5;color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.sc-af-stepper-step-h :where(h1,h2.sc-af-stepper-step,h3.sc-af-stepper-step,h4.sc-af-stepper-step,h5.sc-af-stepper-step,h6).sc-af-stepper-step,.sc-af-stepper-step-h .sc-af-stepper-step:where(p){font:inherit;color:inherit;margin:0}.stepper--vertical.sc-af-stepper-step-h,.stepper--vertical .sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper--vertical.sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step,.stepper--vertical .sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step{margin-bottom:0}@media (max-width: 767px){.sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper-step__badge.sc-af-stepper-step{margin-bottom:0}}";
+
+const AfStepperStep = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Step number shown in the badge. Auto-assigned by the parent stepper if
+         * not explicitly set.
+         */
+        this.index = 1;
+    }
+    render() {
+        return (h(Host, { key: '46648c0bf2d8e105124330d3b5af3e00846aa835' }, h("span", { key: 'a93e98a78ea6af3b88872881d2def273f8ed6c9e', class: "stepper-step__badge" }, this.index), h("div", { key: '158b3cd26c698e18cd62ff7cd91a335ee67816d0', class: "stepper-step__content" }, h("div", { key: '1c460bbc8dad67b86a9dbdd6b069548ae8299628', class: "stepper-step__heading" }, h("slot", { key: '1e5125c95c98e770ebbb2c6114e18fe4b7255e55', name: "heading" })), h("div", { key: '05b7d6c8f0560e9a51c12d50b005cc55d727b6b5', class: "stepper-step__body" }, h("slot", { key: 'efc0219f2ec216d8f3409f73239f603eafe4b299', name: "body" })))));
+    }
+};
+AfStepperStep.style = afStepperStepCss;
+
+export { AfStepperStep as af_stepper_step };
+//# sourceMappingURL=af-stepper-step.entry.js.map

package/dist/esm/af-stepper-step.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-stepper-step.entry.js","sources":["src/components/af-stepper-step/af-stepper-step.css?tag=af-stepper-step&encapsulation=scoped","src/components/af-stepper-step/af-stepper-step.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 16px;\n  position: relative;\n  z-index: 1;\n}\n\n.stepper-step__badge {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n  background: var(--colour-background-white, #ffffff);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  font-size: 20px;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin-bottom: 24px;\n  flex-shrink: 0;\n}\n\n.stepper-step__content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 320px;\n}\n\n.stepper-step__heading {\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 24px;\n  line-height: 1.2;\n  letter-spacing: -0.02em;\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n}\n\n.stepper-step__body {\n  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n  font-size: 16px;\n  line-height: 1.5;\n  color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Normalize slotted heading/body tags */\n:host :where(h1, h2, h3, h4, h5, h6),\n:host :where(p) {\n  font: inherit;\n  color: inherit;\n  margin: 0;\n}\n\n/* Vertical orientation — align left */\n:host-context(.stepper--vertical) {\n  flex-direction: row;\n  align-items: flex-start;\n  text-align: left;\n  gap: 24px;\n  padding: 0;\n}\n\n:host-context(.stepper--vertical) .stepper-step__badge {\n  margin-bottom: 0;\n}\n\n@media (max-width: 767px) {\n  :host {\n    flex-direction: row;\n    align-items: flex-start;\n    text-align: left;\n    gap: 24px;\n    padding: 0;\n  }\n  .stepper-step__badge {\n    margin-bottom: 0;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single step within an af-stepper. Renders a numbered circular badge\n * followed by slotted heading + body content.\n *\n * The parent af-stepper auto-assigns the `index` attribute based on DOM\n * order, so consumers don't need to hand-number the steps.\n *\n * @slot heading - Step title (h3/h4 recommended).\n * @slot body - Step description paragraph(s).\n */\n@Component({\n  tag: 'af-stepper-step',\n  styleUrl: 'af-stepper-step.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfStepperStep {\n  /**\n   * Step number shown in the badge. Auto-assigned by the parent stepper if\n   * not explicitly set.\n   */\n  @Prop({ reflect: true }) index: number = 1;\n\n  render() {\n    return (\n      <Host>\n        <span class=\"stepper-step__badge\">{this.index}</span>\n        <div class=\"stepper-step__content\">\n          <div class=\"stepper-step__heading\">\n            <slot name=\"heading\"></slot>\n          </div>\n          <div class=\"stepper-step__body\">\n            <slot name=\"body\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,u4DAAu4D;;MCkBn5D,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAiB3C;IAfC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACrD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,CACF,CACD;;;;;;;"}

package/dist/esm/af-stepper.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B0LVveHp.js';
+
+const afStepperCss = ".sc-af-stepper-h{display:flex;width:100%;position:relative;max-width:1120px;margin:0 auto;align-items:flex-start;justify-content:space-between;gap:24px}.stepper--vertical.sc-af-stepper-h{flex-direction:column;max-width:680px;gap:40px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:23px;left:8%;right:8%;height:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}.stepper--vertical.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:24px;bottom:24px;left:23px;width:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}@media (max-width: 767px){.stepper--horizontal.sc-af-stepper{flex-direction:column;gap:32px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto}}";
+
+const AfStepper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Layout orientation. Horizontal on desktop, auto-stacks on mobile. */
+        this.orientation = 'horizontal';
+    }
+    componentDidLoad() {
+        this.assignIndices();
+    }
+    assignIndices() {
+        const steps = Array.from(this.el.querySelectorAll('af-stepper-step'));
+        steps.forEach((step, i) => {
+            // Set via property so Stencil reactively re-renders the badge.
+            // Only overwrite when the consumer hasn't explicitly set one.
+            if (step.index == null || step.index === 1) {
+                step.index = i + 1;
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: 'b5f2ab2322500d11cf8f7b4c21a21325d369c2dd', class: `stepper stepper--${this.orientation}` }, h("div", { key: '48ab51de16af6744d77ae8d2426638739538615f', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '155473dde69196b6a8635fc487d4b88a61905053' })));
+    }
+    get el() { return getElement(this); }
+};
+AfStepper.style = afStepperCss;
+
+export { AfStepper as af_stepper };
+//# sourceMappingURL=af-stepper.entry.js.map

package/dist/esm/af-stepper.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-stepper.entry.js","sources":["src/components/af-stepper/af-stepper.css?tag=af-stepper&encapsulation=scoped","src/components/af-stepper/af-stepper.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n  position: relative;\n  max-width: 1120px;\n  margin: 0 auto;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 24px;\n}\n\n:host(.stepper--vertical) {\n  flex-direction: column;\n  max-width: 680px;\n  gap: 40px;\n}\n\n/* Horizontal connector — thin line running across the row of badges. */\n.stepper--horizontal .stepper__connector {\n  position: absolute;\n  top: 23px; /* aligned to badge centre (badge height 48px / 2 = 24, minus 1px for line) */\n  left: 8%;\n  right: 8%;\n  height: 2px;\n  background: var(--colour-brand-inkwell, #14343b);\n  opacity: 0.25;\n  z-index: 0;\n}\n\n.stepper--vertical .stepper__connector {\n  position: absolute;\n  top: 24px;\n  bottom: 24px;\n  left: 23px;\n  width: 2px;\n  background: var(--colour-brand-inkwell, #14343b);\n  opacity: 0.25;\n  z-index: 0;\n}\n\n@media (max-width: 767px) {\n  .stepper--horizontal {\n    flex-direction: column;\n    gap: 32px;\n  }\n  .stepper--horizontal .stepper__connector {\n    top: 24px;\n    bottom: 24px;\n    left: 23px;\n    right: auto;\n    width: 2px;\n    height: auto;\n  }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Stepper composite for \"Sign up / Upload / See results\"-style marketing\n * flows. Renders children `af-stepper-step` elements in a horizontal row\n * (desktop) or vertical stack (mobile), with a connector line between badges.\n *\n * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine\n * connector, and centered step text.\n *\n * @example\n * ```html\n * <af-stepper>\n *   <af-stepper-step>\n *     <h3 slot=\"heading\">Sign up for free</h3>\n *     <p slot=\"body\">No sales calls, no credit cards.</p>\n *   </af-stepper-step>\n *   <af-stepper-step>...</af-stepper-step>\n *   <af-stepper-step>...</af-stepper-step>\n * </af-stepper>\n * ```\n *\n * @slot - `af-stepper-step` elements.\n */\n@Component({\n  tag: 'af-stepper',\n  styleUrl: 'af-stepper.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfStepper {\n  @Element() el!: HTMLElement;\n\n  /** Layout orientation. Horizontal on desktop, auto-stacks on mobile. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.assignIndices();\n  }\n\n  private assignIndices() {\n    const steps = Array.from(this.el.querySelectorAll('af-stepper-step')) as any[];\n    steps.forEach((step, i) => {\n      // Set via property so Stencil reactively re-renders the badge.\n      // Only overwrite when the consumer hasn't explicitly set one.\n      if (step.index == null || step.index === 1) {\n        step.index = i + 1;\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host class={`stepper stepper--${this.orientation}`}>\n        <div class=\"stepper__connector\" aria-hidden=\"true\"></div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,s1BAAs1B;;MC8B91B,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAW,CAAA,WAAA,GAA8B,YAAY;AAyB9D;IAvBC,gBAAgB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;;IAGd,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAU;QAC9E,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;;;AAGxB,YAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;AAC1C,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;;AAEtB,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,WAAW,CAAE,CAAA,EAAA,EACjD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,EACzD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

package/dist/esm/af-tag.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-B0LVveHp.js';
 
-const afTagCss = ":host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-sand{background-color:var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-sand:hover{background-color:var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d))}.tag.variant-light{background-color:var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));color:var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-light:hover{background-color:var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3))}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}";
+const afTagCss = ":host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-default{background-color:var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-default:hover{background-color:var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d))}.tag.variant-inkwell{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-brand-white, #ffffff)}.tag.variant-inkwell:hover{background-color:var(--colour-tints-inkwell-500, #1e4a48)}.tag.variant-white{background-color:var(--colour-brand-white, #ffffff);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-white:hover{background-color:var(--colour-tints-mist-green-100, #e1eee1)}.tag.variant-soft-clay{background-color:var(--colour-brand-soft-clay, #b09670);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-soft-clay:hover{background-color:var(--colour-tints-soft-clay-400, #c0ab8d)}.tag.variant-mist-green{background-color:var(--colour-brand-mist-green, #c6d5d1);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-mist-green:hover{background-color:var(--colour-tints-mist-green-200, #d2e8e3)}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}";
 
 const AfTag = class {
     constructor(hostRef) {
@@ -8,25 +8,24 @@ const AfTag = class {
         /**
          * The size of the tag
          * - `x-small` - Compact tag with minimal padding
-         * - `small` - Small tag with moderate padding
+         * - `small` - Small tag with moderate padding (default)
          * - `large` - Large tag with generous padding
          */
         this.size = 'small';
         /**
-         * The visual variant of the tag
-         * - `sand` - Soft-clay/tan colored background (default)
-         * - `light` - Mist-green/light colored background
+         * Visual variant of the tag. `default` inherits tag colors from the
+         * parent theme context. Theme-named variants force a specific palette.
          */
-        this.variant = 'sand';
+        this.variant = 'default';
     }
     render() {
         const TagElement = this.href ? 'a' : 'span';
         const linkProps = this.href ? { href: this.href } : {};
-        return (h(Host, { key: '7114f4a8e55509fb2c45561967d0dab339b7a75c' }, h(TagElement, { key: '868a14474ecd8edb4a90489d39913e5862c033c4', class: {
+        return (h(Host, { key: '168820b68d12f7e66a926c92f9f93c1a8dca20b0' }, h(TagElement, { key: '5f4d4ee9eeb5971003c0906e886c863186068d5e', class: {
                 'tag': true,
                 [`size-${this.size}`]: true,
                 [`variant-${this.variant}`]: true,
-            }, ...linkProps }, h("slot", { key: '57d2975785b2ec3ac74256510c1a26bfe2b6d96b' }))));
+            }, ...linkProps }, h("slot", { key: 'd756e89c36ce088ed425153cc1199f21a6047461' }))));
     }
 };
 AfTag.style = afTagCss;

package/dist/esm/af-tag.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-tag.entry.js","sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\n/* Make links look clickable */\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: SAND (Soft-clay/tan colored - default)\n   ========================================================================== */\n\n.tag.variant-sand {\n  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-sand:hover {\n  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   VARIANT: LIGHT (Mist-green/light colored)\n   ========================================================================== */\n\n.tag.variant-light {\n  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));\n  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-light:hover {\n  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n/* Size: X-Small */\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Small */\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Large */\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n/* Focus state */\n.tag:focus {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus visible for keyboard navigation */\n.tag:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'sand' | 'light';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n * \n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"light\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * The visual variant of the tag\n   * - `sand` - Soft-clay/tan colored background (default)\n   * - `light` - Mist-green/light colored background\n   */\n  @Prop() variant: TagVariant = 'sand';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,2hDAA2hD;;MCqB/hD,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,MAAM;AA0BrC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;"}
+{"version":3,"file":"af-tag.entry.js","sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: DEFAULT (inherits from parent theme context)\n   ========================================================================== */\n\n.tag.variant-default {\n  background-color: var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-default:hover {\n  background-color: var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   EXPLICIT THEME VARIANTS\n   ========================================================================== */\n\n.tag.variant-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-brand-white, #ffffff);\n}\n\n.tag.variant-inkwell:hover {\n  background-color: var(--colour-tints-inkwell-500, #1e4a48);\n}\n\n.tag.variant-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-white:hover {\n  background-color: var(--colour-tints-mist-green-100, #e1eee1);\n}\n\n.tag.variant-soft-clay {\n  background-color: var(--colour-brand-soft-clay, #b09670);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-soft-clay:hover {\n  background-color: var(--colour-tints-soft-clay-400, #c0ab8d);\n}\n\n.tag.variant-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-mist-green:hover {\n  background-color: var(--colour-tints-mist-green-200, #d2e8e3);\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n.tag:focus {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'default' | 'inkwell' | 'white' | 'soft-clay' | 'mist-green';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n *\n * The `default` variant inherits its colors from the parent theme context\n * (af-section, af-card). Use explicit variants (`inkwell`, `white`,\n * `soft-clay`, `mist-green`) to override.\n *\n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\" variant=\"inkwell\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"white\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding (default)\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * Visual variant of the tag. `default` inherits tag colors from the\n   * parent theme context. Theme-named variants force a specific palette.\n   */\n  @Prop() variant: TagVariant = 'default';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,sjEAAsjE;;MCyB1jE,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,SAAS;AA0BxC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;"}

package/dist/esm/af-testimonial-carousel.entry.js

@@ -90,7 +90,7 @@ const AfTestimonialCarousel = class {
         return (this.currentIndex + 1) / this.testimonialCount;
     }
     render() {
-        return (h(Host, { key: 'deda1bbad2330b3e82ebc7a6b1f424ba76b72c29' }, h("div", { key: '1146c1a67a3a682114c95bcfa37993ccf2a1fd3e', class: "testimonial-carousel" }, h("div", { key: '38c56a104b2f8956acb144f95a7607b35220f99b', class: "testimonial-slides" }, h("slot", { key: '981f9b3eb29f8f72095568747b45d56eb4d58ca3' })), this.testimonialCount > 1 && (h("div", { key: '5f49d3b23edf9748e5c1205b1ee25948b9d5817b', class: "testimonial-progress" }, h("af-progress-line", { key: 'ef7d80cbae1f4284e58a25cad35120880b6746d2', progress: this.getProgress() }))))));
+        return (h(Host, { key: 'fda7e141f1657586828a58e7b82f18be8e4317c3' }, h("div", { key: '99dff39b6d4396358ed8aefdd8b7d6cc728f81da', class: "testimonial-carousel" }, h("div", { key: '3d89451d92c9fbf339936390b9637a90d726d62a', class: "testimonial-slides" }, h("slot", { key: '6cf20af5e78756e401aa5175911b5937e8abeab7' })), this.testimonialCount > 1 && (h("div", { key: 'f6e41055d74ad466524a7f96377c5a582e974a51', class: "testimonial-progress" }, h("af-progress-line", { key: 'aa68920e47fe7ec219374d6fadde33897f2b0df9', progress: this.getProgress() }))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/af-testimonial-stat.entry.js

@@ -11,7 +11,7 @@ const AfTestimonialStat = class {
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: 'a52644b3c724b893aa469f41611026c4fcd51494' }, h("div", { key: '7dd93afb4f9767e144223640e398e589659d613d', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '203a0b96fb9b3704f2afb0441d21fead46a55cb0', level: 2, class: "stat-value" }, this.value), h("af-text", { key: 'a8786177a797f6251cb97d771ff831aec4dc92fc', variant: "medium", class: "stat-description" }, this.description))));
+        return (h(Host, { key: '1310f77d569265f5399b7f355d41511552e97df3' }, h("div", { key: '37ebace6631dde10e180cc6a74bd943eec494a37', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '39d3f362017c8f2e268b3fd704968f83603f681d', level: 2, class: "stat-value" }, this.value), h("af-text", { key: 'ba1ee71f010217ec6e98f4a40b40997d2237a53b', variant: "medium", class: "stat-description" }, this.description))));
     }
 };
 AfTestimonialStat.style = afTestimonialStatCss;

package/dist/esm/af-testimonial.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0LVveHp.js';
 
-const afTestimonialCss = ".sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;display:flex;height:544px;box-sizing:border-box}.testimonial-image.sc-af-testimonial{position:relative;width:40.5%;min-width:300px;max-width:519px;height:100%;background:var(--colour-brand-inkwell, #14343b);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.testimonial-bg-image.sc-af-testimonial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.7}.testimonial-logo.sc-af-testimonial{position:relative;z-index:1;padding:0 108px;max-width:100%}.testimonial-logo.sc-af-testimonial img.sc-af-testimonial{width:100%;height:auto;display:block}.testimonial-content.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:32px;padding:48px;border:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));border-left:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));flex-shrink:0}.testimonial-text.sc-af-testimonial{max-height:155px;overflow:hidden;text-overflow:ellipsis}.testimonial-attribution.sc-af-testimonial{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b))}.testimonial-stats.sc-af-testimonial{display:flex;gap:32px;width:100%;flex-shrink:0}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));padding-top:32px;flex-shrink:0;min-height:48px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-nav-buttons.sc-af-testimonial{display:flex;gap:12px}";
+const afTestimonialCss = ".sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;display:flex;height:544px;box-sizing:border-box}.testimonial-image.sc-af-testimonial{position:relative;width:50%;min-width:300px;max-width:519px;height:100%;background:var(--colour-brand-inkwell, #14343b);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.testimonial-bg-image.sc-af-testimonial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.7}.testimonial-logo.sc-af-testimonial{position:relative;z-index:1;padding:0 108px;max-width:100%}.testimonial-logo.sc-af-testimonial img.sc-af-testimonial{width:100%;height:auto;display:block}.testimonial-content.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:32px;padding:48px;border:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));border-left:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));flex-shrink:0}.testimonial-text.sc-af-testimonial{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:22px;line-height:1.4;font-weight:var(--font-weight-regular, 400);color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.testimonial-text.sc-af-testimonial-s>p,.testimonial-text .sc-af-testimonial-s>p,.testimonial-text.sc-af-testimonial p.sc-af-testimonial{font:inherit;color:inherit;margin:0 0 12px 0}.testimonial-text.sc-af-testimonial-s>p,.testimonial-text.sc-af-testimonial-s>p:last-child,.testimonial-text .sc-af-testimonial-s>p:last-child,.testimonial-text.sc-af-testimonial p.sc-af-testimonial:last-child{margin-bottom:0}.testimonial-text.sc-af-testimonial-s>ul,.testimonial-text .sc-af-testimonial-s>ul,.testimonial-text.sc-af-testimonial ul.sc-af-testimonial{margin:0 0 12px 0;padding-left:20px}.testimonial-attribution.sc-af-testimonial{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:24px;color:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));margin-top:12px}.testimonial-stats.sc-af-testimonial{display:flex;gap:32px;width:100%;flex-shrink:0}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));padding-top:32px;flex-shrink:0;min-height:48px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-nav-buttons.sc-af-testimonial{display:flex;gap:12px}";
 
 const AfTestimonial = class {
     constructor(hostRef) {
@@ -27,11 +27,11 @@ const AfTestimonial = class {
         };
     }
     render() {
-        return (h(Host, { key: '3e77d8e2922ae899fdddfa2ff5f495e97a4f0014' }, h("div", { key: 'fc304bd6b0c74f09ee4be159480c447a3788a919', class: "testimonial-card" }, h("div", { key: 'be695215e50b0a0c0ba0903ddb0bf8b134316185', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '898522a8038ca9fdde2ea014f65e2a92b925cb22', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'a94f0ddf5ea5b19894296267ef5fa02a4ad123d1', class: "testimonial-logo" }, h("img", { key: '82a2a7adf088ccfbf50a5c5181d2377f002e7e2d', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '39248255de8f8dd551a69ea0b36877ac762bebc2', class: "testimonial-content" }, h("div", { key: '0f6f8aa1d0a0cb96f8ef05c272afa2c349bcc9ce', class: "testimonial-quote-section" }, h("div", { key: 'bc29a0d1b408f44445d3951824b347d14c4f615e', class: "testimonial-quote-icon" }, h("slot", { key: '9c611e4faf05905c5188374a10932610858990ec', name: "quote-icon" }, h("af-icon", { key: 'a7e1862ccdd9d0492ed028372dbb77febb15fcb6', name: "quote", size: 48 }))), h("af-text", { key: '8b654e90692d7106be3c7c023977cf3eb0d449c8', variant: "xlarge", class: "testimonial-text" }, this.quote), h("af-text", { key: '89011282ffd9e5857cdf121abdfb183a1e8ea87c', variant: "xlarge", class: "testimonial-attribution" }, this.attribution)), h("div", { key: '195335ab3ab060c48c60780ac0d62e6dc6dff639', class: "testimonial-stats" }, h("slot", { key: 'bdd887e8dfe27d9879dcfe92cc4a212be78e83d1', name: "stats" })), h("div", { key: '579b975917923bcda4d8b9e5efea6ab76b96756f', class: "testimonial-footer" }, h("div", { key: '15b64a7ad6e409692c8c38823b438102733e2b5f', class: "testimonial-nav" }, this.showNavigation ? (
+        return (h(Host, { key: 'fcdb1ff31040a9cb20381ada0ddb3f0ebe468b92' }, h("div", { key: 'b13944c9bb22271b9e11ffd08871aed9675eeb6b', class: "testimonial-card" }, h("div", { key: 'cc18afbd35481da173c9fcf7dc1ece3bf21ec0a6', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'a4fccdc7ac9efbaa3e6f80aa2b1221a856e4b41b', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '0fc4a5b3815aa9123ccb2b8788610fd7dfc49b8b', class: "testimonial-logo" }, h("img", { key: '5fc97a62298e8c484d169faffbbb891bc499c4ca', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '05db0629d3d182ec5c9aa62d0687f7db93b17358', class: "testimonial-content" }, h("div", { key: 'd810a2544ac07ebdeee3b9598fcbdd900b43a200', class: "testimonial-quote-section" }, h("div", { key: '7f82479f01c29dc55d4757cfdf2563ba7f5b27b2', class: "testimonial-quote-icon" }, h("slot", { key: '598e43eb74d9436f7e91389f5e8703b24be025f1', name: "quote-icon" }, h("af-icon", { key: '8a513b9ddccfbbd09fde07925ff9dd2a9e429d6b', name: "quote", size: 48 }))), h("div", { key: '208146b160dddb380eadaed8c2d64b1125ee7de4', class: "testimonial-text" }, h("slot", { key: '54dfc479096474c67ebaaf91ef2aa2f9f9035f6c', name: "quote-body" }, this.quote)), h("div", { key: 'bb6e20af12cece4b746052f3c3c34affb0b07627', class: "testimonial-attribution" }, this.attribution)), h("div", { key: 'd97ec31aaa11702b1f0564cc594230bba99c4fa0', class: "testimonial-stats" }, h("slot", { key: '73a0fceb1e056fadd9e3675a3bb1bcb2aa121ef7', name: "stats" })), h("div", { key: '52bda4be7e6be1a539c719717e4ae47740390d98', class: "testimonial-footer" }, h("div", { key: '5117302dd9ac52b587d95b766b1454aca7206ba4', class: "testimonial-nav" }, this.showNavigation ? (
         // Render built-in navigation buttons
         h("div", { class: "testimonial-nav-buttons" }, h("af-icon-button", { variant: "secondary", disabled: !this.hasPrev, onClick: this.handlePrev, ariaLabel: "Previous testimonial" }, h("af-icon", { name: "arrow-left", size: 24 })), h("af-icon-button", { variant: "secondary", disabled: !this.hasNext, onClick: this.handleNext, ariaLabel: "Next testimonial" }, h("af-icon", { name: "arrow-right", size: 24 })))) : (
         // Allow custom navigation via slot
-        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '96f5417e1afd667746a06a0e52f108840dfc3e85', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: 'ede339436c8332c9463a4f1252b97235aae80f70', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
+        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '9664bad03640cb9b5d1e93f10c85b4b4307c689e', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: '2dccacf7aaa0a734587916604823f81a2b35b9f9', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
     }
 };
 AfTestimonial.style = afTestimonialCss;