npm - @affinda/wc - Versions diffs - 0.0.17 → 0.0.18 - Mend

@affinda/wc 0.0.17 → 0.0.18

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

Files changed (675) hide show

package/dist/esm/af-tab.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0LVveHp.js';
 const afTabCss = ":host{display:inline-flex;flex-shrink:0}.tab{display:inline-flex;align-items:center;justify-content:center;gap:0;border:none;background:transparent;cursor:pointer;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-label-button, 17px);line-height:var(--line-height-label-button, 20px);text-align:center;transition:color 0.15s ease,\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease}.tab:focus{outline:none}.tab:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, #ffffff),\n    0 0 0 5px var(--af-background-border-active, #8a7049)}.icon-slot,.number-slot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-slot{width:24px;height:24px}.number-slot{width:24px;height:24px}.label{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 var(--space-3, 12px)}.tab.shape-square{padding:var(--space-3, 12px);border-radius:0;overflow:hidden;border-bottom:3px solid transparent}.tab.shape-square:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);border-bottom-color:var(--af-background-border-subtle, #e8eeed)}.tab.shape-square:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-default, #d1ddda)}.tab.shape-square.active{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-active, #8a7049)}.tab.shape-square.disabled{color:var(--af-typography-body-subtle, #60767b);border-bottom-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-square:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-square:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-square.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px);border-radius:var(--radius-pill, 999px);overflow:hidden}.tab.shape-pill:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);background-color:transparent}.tab.shape-pill:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-level-1-hover, #dde6e3)}.tab.shape-pill.active{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-base, #ffffff);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.08)}.tab.shape-pill.disabled{color:var(--af-typography-body-subtle, #60767b);background-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-pill:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}:host([data-breakpoint=\"desktop\"]) .tab.shape-square{padding:var(--space-6, 24px) var(--space-5, 20px);border-bottom-width:4px}:host([data-breakpoint=\"desktop\"]) .tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px)}";
@@ -53,7 +53,7 @@ const AfTab = class {
             'disabled': this.disabled,
             [`shape-${this.shape}`]: true,
         };
-        return (h(Host, { key: '5127117fc8ffbf1ed62de57af0a3ba569398bd0b' }, h("button", { key: 'e32591d0448724b7ead02702b21c5f31518bf982', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: '2d9756769c9a9442e632faac4710eceb6ec7dcb2', class: "number-slot" }, h("slot", { key: 'fc9b02645ada6c015cbdb07db5d02c7f8fee9320', name: "number" }))), this.displayIcon && (h("span", { key: '8f9ef1b8cec03bea2231a0cc19a91537b84de31f', class: "icon-slot" }, h("slot", { key: '9fae54937c7876df37624aa8928dbfe478bec556', name: "icon" }))), h("span", { key: 'e332be1f9007beb3bed7bc4b74480f0fcacd8a6e', class: "label" }, this.label))));
+        return (h(Host, { key: 'fcf77b9850cb9993b793fecc1e99a4c4d66083e5' }, h("button", { key: '0a365b50db1fa33892eb81e1dbc5a2865cc66f3c', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: 'a0747ae5203c28324b9922561d50115a1f62285d', class: "number-slot" }, h("slot", { key: '3ca35e03fe76f71fde734d3fd6a0c98d6ca3f447', name: "number" }))), this.displayIcon && (h("span", { key: '70946507dd105fdb3322fcfb0e59971dc7f34b05', class: "icon-slot" }, h("slot", { key: 'abcc10059ca476b4c61392107823ec22e1d65a38', name: "icon" }))), h("span", { key: 'ab7d4e45bff940cc079c11f24fcc43406436e603', class: "label" }, this.label))));
     }
 };
 AfTab.style = afTabCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.js';
+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))}";
@@ -22,11 +22,11 @@ const AfTag = class {
     render() {
         const TagElement = this.href ? 'a' : 'span';
         const linkProps = this.href ? { href: this.href } : {};
-        return (h(Host, { key: '82b1f25a939716973c927f59e82808572004e871' }, h(TagElement, { key: 'e4a524e0f4dd496ca5485d865549bd0b063bd4ac', class: {
+        return (h(Host, { key: '7114f4a8e55509fb2c45561967d0dab339b7a75c' }, h(TagElement, { key: '868a14474ecd8edb4a90489d39913e5862c033c4', class: {
                 'tag': true,
                 [`size-${this.size}`]: true,
                 [`variant-${this.variant}`]: true,
-            }, ...linkProps }, h("slot", { key: '07202b985638722997e8aff2bad13ed5d1aa8d2c' }))));
+            }, ...linkProps }, h("slot", { key: '57d2975785b2ec3ac74256510c1a26bfe2b6d96b' }))));
     }
 };
 AfTag.style = afTagCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-BmU_CFQ4.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B0LVveHp.js';
 const afTestimonialCarouselCss = ".sc-af-testimonial-carousel-h{display:block;width:100%}.testimonial-carousel.sc-af-testimonial-carousel{position:relative;width:100%;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel{position:relative;width:100%;min-height:544px;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel-s>af-testimonial,.testimonial-slides .sc-af-testimonial-carousel-s>af-testimonial{position:absolute;top:0;left:0;width:100%;transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out}.testimonial-progress.sc-af-testimonial-carousel{margin-top:32px;max-width:840px;margin-left:auto;margin-right:auto}";
@@ -90,7 +90,7 @@ const AfTestimonialCarousel = class {
         return (this.currentIndex + 1) / this.testimonialCount;
     }
     render() {
-        return (h(Host, { key: '57b9644d20de065d6274f35f0aeac5e525a7f994' }, h("div", { key: '69033a6db2cb6242abd737ec98a841109a88d443', class: "testimonial-carousel" }, h("div", { key: 'b94d5bbd634eb445737afe8c0dc8f5795be50b4c', class: "testimonial-slides" }, h("slot", { key: 'a8481aaeeb8b818aa9d0ae0eeff5c30b33288acd' })), this.testimonialCount > 1 && (h("div", { key: '496d86deca071afeacb0d8eb4c273eefa592430e', class: "testimonial-progress" }, h("af-progress-line", { key: 'bb9c74ab68bb2dc247556e81ec07e39b7934e5ee', progress: this.getProgress() }))))));
+        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() }))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.js';
+import { r as registerInstance, h, H as Host } from './index-B0LVveHp.js';
 const afTestimonialStatCss = ".sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));padding-left:16px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap}.stat-description.sc-af-testimonial-stat{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));overflow:hidden;text-overflow:ellipsis}";
@@ -11,7 +11,7 @@ const AfTestimonialStat = class {
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: 'e3dc86a0d0368680dc03ab1a7260ccabd48def13' }, h("div", { key: '97cefaa49ab9fad117d3c541d9b58461ad216566', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '49c03e5fe9c7ddbb31bb8d8a686cffa44517c176', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '3b931281953a7d23d0bdfb540d48635576f84e1d', variant: "medium", class: "stat-description" }, this.description))));
+        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))));
     }
 };
 AfTestimonialStat.style = afTestimonialStatCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.js';
+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}";
@@ -27,11 +27,11 @@ const AfTestimonial = class {
         };
     }
     render() {
-        return (h(Host, { key: 'aa2ad6cdbcba23aac44ba04c80928c0f83a50903' }, h("div", { key: 'e9417c5451eb5c7118760b8b06b97a3debbb49af', class: "testimonial-card" }, h("div", { key: '14f69eda1e3a21202014d9ff92fb7898d4cd6250', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '6447edb4eb0e7d1dd05432038f717820b6053cae', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'd052c5613090c21d7eeed60dba77bcb3dbfbc21a', class: "testimonial-logo" }, h("img", { key: 'f8be04a27d969dffd59cf9bad3bd9bbc9ddeb1d3', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '25d578ea0f78abacdd42bf9edbcf925680069da5', class: "testimonial-content" }, h("div", { key: '92458d4319c9f311bbcb296a6422f63b5c90aae6', class: "testimonial-quote-section" }, h("div", { key: '9f0e3dd17d27211afb49b8257ce896bd63490825', class: "testimonial-quote-icon" }, h("slot", { key: 'fee068be75df3e19436cca1e340ac7b4abdc9b6a', name: "quote-icon" }, h("af-icon", { key: '54416234954357aaaf49864515b87017f45aa09d', name: "quote", size: 48 }))), h("af-text", { key: '3a15866eb88613a956bfcbf107a9da0d51d59526', variant: "xlarge", class: "testimonial-text" }, this.quote), h("af-text", { key: '6c9a0dd1c16bbd8c76ca364bea329c2bf8ee0425', variant: "xlarge", class: "testimonial-attribution" }, this.attribution)), h("div", { key: '866aeb8fa8338d23354d5f4b7be63c5d9c0eaacb', class: "testimonial-stats" }, h("slot", { key: 'f7b559060fb9f9bbba39c2a67c23204d7cbf8bdd', name: "stats" })), h("div", { key: 'b19ad4b37a3ba6c85846732f991870e8312ef1d5', class: "testimonial-footer" }, h("div", { key: 'b1f64564c4dbd14347e32d782874be699d0745b0', class: "testimonial-nav" }, this.showNavigation ? (
+        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 ? (
         // 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: '41adc9217b698b1df0f6075f5aa4ee0c2683632f', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: '3cec7eb5a8514427a257cc6f228e1e5bde2cc713', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
+        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 }))))))));
     }
 };
 AfTestimonial.style = afTestimonialCss;

package/dist/esm/af-text-image-nest.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.js';
+import { r as registerInstance, h, H as Host } from './index-B0LVveHp.js';
 const afTextImageNestCss = ".sc-af-text-image-nest-h{display:block;width:100%}.text-image-nest.sc-af-text-image-nest{width:100%;position:relative}.nest__content.sc-af-text-image-nest{display:flex;flex-direction:column;align-items:center;gap:48px}.nest__grid.sc-af-text-image-nest{display:grid;gap:40px;width:100%}.grid-single.sc-af-text-image-nest{grid-template-columns:1fr}.grid-grid-2.sc-af-text-image-nest{grid-template-columns:repeat(2, 1fr)}.grid-grid-3.sc-af-text-image-nest{grid-template-columns:repeat(3, 1fr)}.grid-grid-4.sc-af-text-image-nest{grid-template-columns:repeat(4, 1fr)}.grid-stacked.sc-af-text-image-nest{grid-template-columns:1fr;gap:48px}.nest__footer.sc-af-text-image-nest{display:flex;justify-content:center;gap:12px}.nest__footer.sc-af-text-image-nest:empty{display:none}@media (max-width: 768px){.nest__content.sc-af-text-image-nest{gap:32px}.nest__grid.sc-af-text-image-nest{grid-template-columns:1fr;gap:32px}.grid-stacked.sc-af-text-image-nest{gap:40px}.nest__footer.sc-af-text-image-nest{flex-direction:column;align-items:center}}.sc-af-text-image-nest-s>*{margin:0}";
@@ -19,7 +19,7 @@ const AfTextImageNest = class {
             'nest__grid': true,
             [`grid-${this.layout}`]: true,
         };
-        return (h(Host, { key: 'bad121a0f47a7711ea1586c316f3363dd5e252ba' }, h("div", { key: '43be16c007ea9b8c7baa75cb038a4bf154730980', class: containerClasses }, h("div", { key: 'da6148be4838273374c0c040b1bb3793f4d3472c', class: "nest__content" }, h("div", { key: 'bccad6fe0a18ccb503f740afc8862a99408f17d5', class: gridClasses }, h("slot", { key: 'b8707c094e88a7c6a09b8e8321ba8edc4d32eb2a' })), h("div", { key: 'bd902e59ee14c2e3d9e4a3bdceb3e9b1603929bb', class: "nest__footer" }, h("slot", { key: '96f63716916447a563125dae4073a0e472becfba', name: "buttons" }))))));
+        return (h(Host, { key: 'fda547a6eaca9705f52fbbed04113534e438f3c8' }, h("div", { key: '565730e0ed6a4b127ef191536b1f10f1c8b417d6', class: containerClasses }, h("div", { key: '65e97a6335b837f1ffd259e5c128c01c1c212f17', class: "nest__content" }, h("div", { key: 'c6eab25a6e3fc7c6c864a6aa6182c6adc7b22032', class: gridClasses }, h("slot", { key: 'e936abaaf1854605ebb1be90130df7d2d100ef49' })), h("div", { key: '11f48762fb08c787ac90256b55bb1a351e92c505', class: "nest__footer" }, h("slot", { key: '8a0f8c1ad853f3aa9deea5df5a3f0b565a1f631e', name: "buttons" }))))));
     }
 };
 AfTextImageNest.style = afTextImageNestCss;

package/dist/esm/af-text-image.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.js';
+import { r as registerInstance, h, H as Host } from './index-B0LVveHp.js';
 const afTextImageCss = ".sc-af-text-image-h{display:block;width:100%}.text-image.sc-af-text-image{display:flex;width:100%}.text-image--side-by-side.sc-af-text-image{flex-direction:row;align-items:flex-start;gap:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image{flex-direction:row-reverse}.text-image--image-right.sc-af-text-image{flex-direction:row}.text-image--full-width.sc-af-text-image{flex-direction:column;gap:var(--space-8, 32px)}.text-image__content.sc-af-text-image{display:flex;flex-direction:column;gap:56px;flex:1;min-width:0}.text-image--proportion-1-3.sc-af-text-image .text-image__content.sc-af-text-image{flex:2}.text-image--proportion-1-4.sc-af-text-image .text-image__content.sc-af-text-image{flex:3}.text-image--proportion-100.sc-af-text-image .text-image__content.sc-af-text-image{flex:none;width:100%}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image{padding-right:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding-left:var(--space-8, 32px)}.text-image--full-width.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__lockup.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%}.text-image__copy.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);max-width:840px;width:100%}.text-image__heading.sc-af-text-image{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-3-desktop, 34px);line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, #14343B);white-space:pre-wrap}.text-image__heading.sc-af-text-image:empty{display:none}.text-image__description.sc-af-text-image{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, #2B484F);white-space:pre-wrap}.text-image__description.sc-af-text-image:empty{display:none}.text-image__buttons.sc-af-text-image{display:block}.text-image__buttons.sc-af-text-image:empty{display:none}.text-image__image-wrapper.sc-af-text-image{flex-shrink:0;overflow:hidden;border-radius:var(--radius-md, 12px)}.text-image--proportion-1-3.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-1-4.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-100.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{width:100%}@media (max-width: 768px){.text-image--side-by-side.sc-af-text-image{flex-direction:column;gap:var(--space-6, 24px)}.text-image--image-left.sc-af-text-image,.text-image--image-right.sc-af-text-image{flex-direction:column}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image,.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__content.sc-af-text-image,.text-image__image-wrapper.sc-af-text-image{flex:none !important;width:100%}.text-image__heading.sc-af-text-image{font-size:var(--font-size-heading-3-mobile, 25px)}.text-image--proportion-100.sc-af-text-image .text-image__description.sc-af-text-image{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.text-image--proportion-100.sc-af-text-image .text-image__lockup.sc-af-text-image{gap:var(--space-3, 12px)}.text-image--proportion-100.sc-af-text-image .text-image__copy.sc-af-text-image{gap:var(--space-3, 12px)}.text-image__image-wrapper.sc-af-text-image{border-radius:var(--radius-sm, 8px)}}.sc-af-text-image-s>*{margin:0}.sc-af-text-image-s>p{margin:0}";

package/dist/esm/af-textarea.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0LVveHp.js';
-const afTextareaCss = ":host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));cursor:default}.required{color:var(--forms-fields-error, #be292a);margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--buttons-secondary-stroke, #14343b);outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));margin:0}.textarea-container{display:flex;background:var(--forms-fields-bg-default, #ffffff);border:1px solid var(--forms-fields-stroke-default, #d0d6d8);border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--forms-fields-bg-hover, #f3f5f5)}.textarea-container.focused{background:var(--forms-fields-bg-default, #ffffff);border-color:var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));box-shadow:0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b)}.textarea-container.error{border-color:var(--forms-fields-stroke-error, #be292a)}.textarea-container.disabled{background:var(--forms-fields-bg-disabled, #e8ebeb);border-color:var(--forms-fields-stroke-default, #d0d6d8);cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--forms-fields-placeholder, #60767b);opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--forms-fields-placeholder, #60767b);resize:none}.textarea:disabled::placeholder{color:var(--forms-fields-placeholder, #60767b)}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--forms-fields-error, #be292a)}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-error, #be292a)}";
+const afTextareaCss = ":host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.textarea-container{display:flex;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.textarea-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.textarea-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.textarea-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));resize:none}.textarea:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";
 const AfTextarea = class {
     constructor(hostRef) {
@@ -82,7 +82,7 @@ const AfTextarea = class {
             'focused': this.isFocused,
             'hovered': this.isHovered && !this.disabled && !this.isFocused
         };
-        return (h(Host, { key: '84f322a374d364669942e9153c6ba42221af1059' }, h("div", { key: '4b5a62e919a479bcf741f2d1d9e39a7b0e1e49ac', class: wrapperClasses }, this.label && (h("div", { key: 'e73b88c28588b8f3e5b9823467e8c972fd671391', class: "label-row" }, h("label", { key: '01c16777469e037495997efc2cacc51778fcd9c7', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '6da50443dadd3a6eec5655b4ff2fa19affa38006', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: 'c731c726f54946273a330c0173f09faeb9fe583b', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '24a1ee4fb10ebd9a84a897cefef09ad7e7b63565', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3523e8495fc5ffa06d793318f55ba79043174931', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'd2caa0b33fccc6289f00fc22fc329df52d86a6ed', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'db8d8ee03abe2638265d192be6efb992a6041199', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '8325f2fc490d8261a596398da7cc68d74ccfce11', name: "label-end" }))), this.description && (h("p", { key: '7db9b0e06615f5a13b7759cd81c23ee6ab124769', class: "description" }, this.description)), h("div", { key: '939c306f7a56735956e2ef4badeb4cfa39abf759', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '0dffd719ed83955990ae1935fb8d39ab92fd9b94', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '1f7f83da7518216eb63ff9cb685ffb92b3b37fb1', class: "error-row", id: "error-message" }, h("span", { key: 'a1af53a449805506ac0abddae3a236232a538bd9', class: "error-icon" }, h("svg", { key: 'b52e5c14a8986c502e1e0dce8a95c7d381c7a8e3', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'af8c97b747c960065f7461e84c893e644b66d9c5', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '145226126e4ba52c6234b3c454e43d87b495789c', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '7b94917ac5c96c6abbfc93826b07fa967b49506a', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '9f097e0c43b1a6b19d0275fed8a216e901ce2d86', class: "error-text" }, this.error))))));
+        return (h(Host, { key: '96a657d6aaed47264bb66750440e1c7fd8020eea' }, h("div", { key: 'cead5c6a37e1e6b8b6b6eb6292c85c5bc8731646', class: wrapperClasses }, this.label && (h("div", { key: '085b08a6337ff9fed164bf964d2ec9bdd45780b0', class: "label-row" }, h("label", { key: 'edf6d4f74707ad3f6dcca97b6093451de4d7f728', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '1e8ac41140dae27ec44ce22ea0579cb452ab33b1', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: 'b1853be2ab1c4683180b596b03caff7f25f5b0bc', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '3781cac4e5fda9e91df1de36f846b91d7ec4ff30', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7723e07ea2201d8e2a31c8827a321dad88b4b792', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '1f161dcff4b6d39b178dd930790016f17e0b2190', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'fe06a5d4a08c3fac58e58b0ae25ebb40e72c574b', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '7bd92220bb03929a39772f2411f8db0f7c9bf82c', name: "label-end" }))), this.description && (h("p", { key: '56fbec9391c269a2c6c7b9f26f1f6f5e5fac1ae5', class: "description" }, this.description)), h("div", { key: '052fdfd7ba49b36754f8384bcf3f18da97357374', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '7c41dc6194fbe085e592ba0206e6820a5e47e957', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: 'b7ff36f947861a248eab5cb5ebe4af6152abf061', class: "error-row", id: "error-message" }, h("span", { key: 'fe93eddb75471c06db6270715d8851c90695492a', class: "error-icon" }, h("svg", { key: '9125de267b317a583032a63549b1efa78da41448', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b99a6c173c0fb789f1428556a8ec403ec512641c', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'b6b6547fcfab22a743161404c4157c3946e87e18', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '0022ce718a6e9c1b35cadf9a7bfa7a618489c84e', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: 'dcd81e02efa888584032c12cc15b451d9c4dc82c', class: "error-text" }, this.error))))));
     }
 };
 AfTextarea.style = afTextareaCss;

package/dist/esm/af-textarea.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-textarea.entry.js","sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* Wrapper /\n.textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--sds-size-space-200, 8px);\n width: 100%;\n}\n\n/ Label row /\n.label-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.label {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 16px;\n line-height: 24px;\n color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n cursor: default;\n}\n\n.required {\n color: var(--forms-fields-error, #be292a);\n margin-left: 2px;\n}\n\n/ Info icon button /\n.info-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n flex-shrink: 0;\n}\n\n.info-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.info-icon:hover {\n opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n outline: 2px solid var(--buttons-secondary-stroke, #14343b);\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Description /\n.description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));\n margin: 0;\n}\n\n/ Textarea container /\n.textarea-container {\n display: flex;\n background: var(--forms-fields-bg-default, #ffffff);\n border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);\n border-radius: var(--radii-input, 8px);\n transition: all 0.15s ease;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n/ Hover state /\n.textarea-container.hovered {\n background: var(--forms-fields-bg-hover, #f3f5f5);\n}\n\n/ Focus state /\n.textarea-container.focused {\n background: var(--forms-fields-bg-default, #ffffff);\n border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));\n box-shadow: \n 0 0 0 4px var(--background-base, #ffffff), \n 0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n}\n\n/ Error state /\n.textarea-container.error {\n border-color: var(--forms-fields-stroke-error, #be292a);\n}\n\n/ Disabled state /\n.textarea-container.disabled {\n background: var(--forms-fields-bg-disabled, #e8ebeb);\n border-color: var(--forms-fields-stroke-default, #d0d6d8);\n cursor: not-allowed;\n}\n\n/ Native textarea /\n.textarea {\n flex: 1;\n min-width: 0;\n min-height: 108px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));\n outline: none;\n resize: vertical;\n}\n\n.textarea::placeholder {\n color: var(--forms-fields-placeholder, #60767b);\n opacity: 1;\n}\n\n.textarea:disabled {\n cursor: not-allowed;\n color: var(--forms-fields-placeholder, #60767b);\n resize: none;\n}\n\n.textarea:disabled::placeholder {\n color: var(--forms-fields-placeholder, #60767b);\n}\n\n/ Error row /\n.error-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.error-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--forms-fields-error, #be292a);\n}\n\n.error-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.error-text {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--forms-fields-error, #be292a);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/\n Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n /\n@Component({\n tag: 'af-textarea',\n styleUrl: 'af-textarea.css',\n shadow: true\n})\nexport class AfTextarea {\n /\n The label text for the textarea\n /\n @Prop() label?: string;\n\n /\n Description text displayed below the label\n /\n @Prop() description?: string;\n\n /\n Placeholder text for the textarea\n /\n @Prop() placeholder?: string;\n\n /\n The current value of the textarea\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n The name of the textarea for form submission\n /\n @Prop() name?: string;\n\n /\n Whether the textarea is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Whether the textarea is required\n /\n @Prop() required: boolean = false;\n\n /\n Whether the textarea is read-only\n /\n @Prop() readonly: boolean = false;\n\n /\n Error message to display (also sets error state)\n /\n @Prop() error?: string;\n\n /\n Whether to show the info icon next to the label\n /\n @Prop() showInfoIcon: boolean = false;\n\n /\n Number of visible rows (height)\n /\n @Prop() rows: number = 4;\n\n /\n Maximum length of input value\n /\n @Prop() maxlength?: number;\n\n /\n Minimum length of input value\n /\n @Prop() minlength?: number;\n\n /\n Whether the textarea is resizable\n /\n @Prop() resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' = 'vertical';\n\n /\n Emitted when the textarea value changes\n /\n @Event() afInput!: EventEmitter<{ value: string }>;\n\n /\n Emitted when the textarea loses focus\n /\n @Event() afBlur!: EventEmitter<void>;\n\n /\n Emitted when the textarea gains focus\n /\n @Event() afFocus!: EventEmitter<void>;\n\n /\n Emitted when the info icon is clicked\n /\n @Event() afInfoClick!: EventEmitter<void>;\n\n @State() private isFocused: boolean = false;\n @State() private isHovered: boolean = false;\n\n private textareaEl?: HTMLTextAreaElement;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.afInput.emit({ value: this.value });\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n this.afFocus.emit();\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n this.afBlur.emit();\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleInfoClick = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.afInfoClick.emit();\n };\n\n render() {\n const hasError = !!this.error;\n const hasValue = !!(this.value && this.value.length > 0);\n\n const wrapperClasses = {\n 'textarea-wrapper': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused,\n 'populated': hasValue\n };\n\n const textareaContainerClasses = {\n 'textarea-container': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n {/ Label /}\n {this.label && (\n <div class=\"label-row\">\n <label class=\"label\" htmlFor=\"textarea\">\n {this.label}\n {this.required && <span class=\"required\"></span>}\n </label>\n {this.showInfoIcon && (\n <button \n type=\"button\" \n class=\"info-icon\" \n onClick={this.handleInfoClick}\n aria-label=\"More information\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n )}\n <slot name=\"label-end\"></slot>\n </div>\n )}\n\n {/* Description /}\n {this.description && (\n <p class=\"description\">{this.description}</p>\n )}\n\n {/ Textarea container /}\n <div \n class={textareaContainerClasses}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n {/ Native textarea /}\n <textarea\n ref={(el) => this.textareaEl = el ?? undefined}\n id=\"textarea\"\n class=\"textarea\"\n name={this.name}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n readonly={this.readonly}\n rows={this.rows}\n maxlength={this.maxlength}\n minlength={this.minlength}\n style={{ resize: this.resize }}\n aria-invalid={hasError ? 'true' : undefined}\n aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n\n {/ Error message */}\n {hasError && (\n <div class=\"error-row\" id=\"error-message\">\n <span class=\"error-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"error-text\">{this.error}</span>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"af-textarea.entry.js","sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* Wrapper /\n.textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--sds-size-space-200, 8px);\n width: 100%;\n}\n\n/ Label row /\n.label-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.label {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n cursor: default;\n}\n\n.required {\n color: var(--af-input-error, var(--colour-error, #be292a));\n margin-left: 2px;\n}\n\n/ Info icon button /\n.info-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n}\n\n.info-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.info-icon:hover {\n opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Description /\n.description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n margin: 0;\n}\n\n/ Textarea container /\n.textarea-container {\n display: flex;\n background: var(--af-input-bg, #ffffff);\n border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n border-radius: var(--radii-input, 8px);\n transition: all 0.15s ease;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n/ Hover state /\n.textarea-container.hovered {\n background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/ Focus state /\n.textarea-container.focused {\n background: var(--af-input-bg, #ffffff);\n border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff), \n 0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/ Error state /\n.textarea-container.error {\n border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/ Disabled state /\n.textarea-container.disabled {\n background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n cursor: not-allowed;\n}\n\n/ Native textarea /\n.textarea {\n flex: 1;\n min-width: 0;\n min-height: 108px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n outline: none;\n resize: vertical;\n}\n\n.textarea::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n opacity: 1;\n}\n\n.textarea:disabled {\n cursor: not-allowed;\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n resize: none;\n}\n\n.textarea:disabled::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/ Error row /\n.error-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.error-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.error-text {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/\n Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n /\n@Component({\n tag: 'af-textarea',\n styleUrl: 'af-textarea.css',\n shadow: true\n})\nexport class AfTextarea {\n /\n The label text for the textarea\n /\n @Prop() label?: string;\n\n /\n Description text displayed below the label\n /\n @Prop() description?: string;\n\n /\n Placeholder text for the textarea\n /\n @Prop() placeholder?: string;\n\n /\n The current value of the textarea\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n The name of the textarea for form submission\n /\n @Prop() name?: string;\n\n /\n Whether the textarea is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Whether the textarea is required\n /\n @Prop() required: boolean = false;\n\n /\n Whether the textarea is read-only\n /\n @Prop() readonly: boolean = false;\n\n /\n Error message to display (also sets error state)\n /\n @Prop() error?: string;\n\n /\n Whether to show the info icon next to the label\n /\n @Prop() showInfoIcon: boolean = false;\n\n /\n Number of visible rows (height)\n /\n @Prop() rows: number = 4;\n\n /\n Maximum length of input value\n /\n @Prop() maxlength?: number;\n\n /\n Minimum length of input value\n /\n @Prop() minlength?: number;\n\n /\n Whether the textarea is resizable\n /\n @Prop() resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' = 'vertical';\n\n /\n Emitted when the textarea value changes\n /\n @Event() afInput!: EventEmitter<{ value: string }>;\n\n /\n Emitted when the textarea loses focus\n /\n @Event() afBlur!: EventEmitter<void>;\n\n /\n Emitted when the textarea gains focus\n /\n @Event() afFocus!: EventEmitter<void>;\n\n /\n Emitted when the info icon is clicked\n /\n @Event() afInfoClick!: EventEmitter<void>;\n\n @State() private isFocused: boolean = false;\n @State() private isHovered: boolean = false;\n\n private textareaEl?: HTMLTextAreaElement;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.afInput.emit({ value: this.value });\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n this.afFocus.emit();\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n this.afBlur.emit();\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleInfoClick = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.afInfoClick.emit();\n };\n\n render() {\n const hasError = !!this.error;\n const hasValue = !!(this.value && this.value.length > 0);\n\n const wrapperClasses = {\n 'textarea-wrapper': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused,\n 'populated': hasValue\n };\n\n const textareaContainerClasses = {\n 'textarea-container': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n {/ Label /}\n {this.label && (\n <div class=\"label-row\">\n <label class=\"label\" htmlFor=\"textarea\">\n {this.label}\n {this.required && <span class=\"required\"></span>}\n </label>\n {this.showInfoIcon && (\n <button \n type=\"button\" \n class=\"info-icon\" \n onClick={this.handleInfoClick}\n aria-label=\"More information\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n )}\n <slot name=\"label-end\"></slot>\n </div>\n )}\n\n {/* Description /}\n {this.description && (\n <p class=\"description\">{this.description}</p>\n )}\n\n {/ Textarea container /}\n <div \n class={textareaContainerClasses}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n {/ Native textarea /}\n <textarea\n ref={(el) => this.textareaEl = el ?? undefined}\n id=\"textarea\"\n class=\"textarea\"\n name={this.name}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n readonly={this.readonly}\n rows={this.rows}\n maxlength={this.maxlength}\n minlength={this.minlength}\n style={{ resize: this.resize }}\n aria-invalid={hasError ? 'true' : undefined}\n aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n\n {/ Error message */}\n {hasError && (\n <div class=\"error-row\" id=\"error-message\">\n <span class=\"error-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"error-text\">{this.error}</span>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/esm/af-theme-override.entry.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-B0LVveHp.js';
+const afThemeOverrideCss = ".sc-af-theme-override-h{display:contents}.theme-override.sc-af-theme-override{display:contents}.theme-white.sc-af-theme-override{--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-theme-override{--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-theme-override{--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-theme-override{--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-theme-override{--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)}";
+const AfThemeOverride = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The theme to apply to child components.
+         * Overrides any inherited theme from parent containers.
+         */
+        this.theme = 'white';
+    }
+    render() {
+        return (h(Host, { key: '303d518d6047bb01db2b315a93169014c849a78e' }, h("div", { key: '6d208731e221d7514d384543fe79e68c0830a3fb', class: `theme-override theme-${this.theme}` }, h("slot", { key: '75de070f92a698b39286eacc5981b3d7d642b49a' }))));
+    }
+};
+AfThemeOverride.style = afThemeOverrideCss;
+export { AfThemeOverride as af_theme_override };
+//# sourceMappingURL=af-theme-override.entry.js.map

package/dist/esm/af-theme-override.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-theme-override.entry.js","sources":["src/components/af-theme-override/af-theme-override.css?tag=af-theme-override&encapsulation=scoped","src/components/af-theme-override/af-theme-override.tsx"],"sourcesContent":["/**\n * Theme Override Component Styles\n * \n * Sets theme CSS custom properties WITHOUT applying background color.\n * This allows overriding the theme context for child components while\n * maintaining the parent's visual background.\n */\n\n:host {\n display: contents;\n}\n\n.theme-override {\n display: contents;\n}\n\n/* ==========================================================================\n WHITE THEME\n ========================================================================== */\n\n.theme-white {\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 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 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 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 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","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Theme Override utility component.\n * Wraps content and applies an explicit theme, overriding any inherited theme\n * from parent containers like AfSection or AfCard.\n * \n * Unlike AfSection, this component does NOT apply a background color - \n * it only sets the CSS custom properties that child components consume.\n * \n * @slot - Content to be themed\n */\n@Component({\n tag: 'af-theme-override',\n styleUrl: 'af-theme-override.css',\n shadow: false,\n scoped: true,\n})\nexport class AfThemeOverride {\n /** \n * The theme to apply to child components.\n * Overrides any inherited theme from parent containers.\n */\n @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n\n render() {\n return (\n <Host>\n <div class={`theme-override theme-${this.theme}`}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,2jfAA2jf;;MCkBzkf,eAAe,GAAA,MAAA;AAN5B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;AAW1F;IATC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,KAAK,EAAE,EAAA,EAC9C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

package/dist/esm/af-typography-lockup.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.js';
+import { r as registerInstance, h, H as Host } from './index-B0LVveHp.js';
-const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column}.breakpoint-desktop.heading-1.lockup{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1.lockup{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2.lockup,.breakpoint-desktop.heading-3.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3.lockup,.breakpoint-desktop.heading-4.lockup,.breakpoint-desktop.heading-5.lockup{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4.lockup,.breakpoint-mobile.heading-5.lockup{gap:var(--space-2, 8px)}.text-left{align-items:flex-start}.text-center{align-items:center}.text-left .copy,.text-left .heading,.text-left .description{text-align:left}.text-center .copy,.text-center .heading,.text-center .description{text-align:center}.copy{display:flex;flex-direction:column;width:100%;max-width:840px}.breakpoint-desktop.heading-1 .copy{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1 .copy{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2 .copy,.breakpoint-desktop.heading-3 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3 .copy,.breakpoint-desktop.heading-4 .copy,.breakpoint-desktop.heading-5 .copy{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4 .copy,.breakpoint-mobile.heading-5 .copy{gap:var(--space-2, 8px)}.heading{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:var(--font-size-heading-1-desktop, 56px)}.breakpoint-desktop.heading-2 .heading{font-size:var(--font-size-heading-2-desktop, 44px)}.breakpoint-desktop.heading-3 .heading{font-size:var(--font-size-heading-3-desktop, 34px)}.breakpoint-desktop.heading-4 .heading{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-desktop.heading-5 .heading{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-mobile.heading-1 .heading{font-size:var(--font-size-heading-1-mobile, 38px)}.breakpoint-mobile.heading-2 .heading{font-size:var(--font-size-heading-2-mobile, 32px)}.breakpoint-mobile.heading-3 .heading{font-size:var(--font-size-heading-3-mobile, 25px)}.breakpoint-mobile.heading-4 .heading{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}.breakpoint-mobile.heading-5 .heading{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}.description{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:var(--font-size-body-large, 18px);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));white-space:pre-wrap}.breakpoint-mobile.heading-3 .description,.breakpoint-desktop.heading-4 .description,.breakpoint-mobile.heading-4 .description,.breakpoint-desktop.heading-5 .description,.breakpoint-mobile.heading-5 .description{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.description:empty{display:none}.buttons{display:flex;gap:var(--space-3, 12px)}.buttons:empty{display:none}.button-horizontal .buttons{flex-direction:row;align-items:center}.text-left.button-horizontal{flex-direction:row;align-items:center;gap:var(--space-4, 16px)}.text-left.button-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.button-horizontal.heading-3 .copy,.text-left.button-horizontal.heading-4 .copy{max-width:840px}.text-left.button-horizontal .buttons{flex-shrink:0}.button-vertical .buttons{flex-direction:row;align-items:flex-start}.text-center.button-vertical .buttons{justify-content:center}.breakpoint-mobile .buttons{flex-direction:column;align-items:stretch}.breakpoint-mobile.text-center .buttons{align-items:center}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
+const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column}.breakpoint-desktop.heading-1.lockup{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1.lockup{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2.lockup,.breakpoint-desktop.heading-3.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3.lockup,.breakpoint-desktop.heading-4.lockup,.breakpoint-desktop.heading-5.lockup{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4.lockup,.breakpoint-mobile.heading-5.lockup{gap:var(--space-2, 8px)}.text-left{align-items:flex-start}.text-center{align-items:center}.text-right{align-items:flex-end}.text-justify{align-items:stretch}.align-left{text-align:left;--af-text-align:left}.align-center{text-align:center;--af-text-align:center}.align-right{text-align:right;--af-text-align:right}.align-justify{text-align:justify;--af-text-align:justify}.copy{display:flex;flex-direction:column;width:100%;max-width:840px}.breakpoint-desktop.heading-1 .copy{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1 .copy{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2 .copy,.breakpoint-desktop.heading-3 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3 .copy,.breakpoint-desktop.heading-4 .copy,.breakpoint-desktop.heading-5 .copy{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4 .copy,.breakpoint-mobile.heading-5 .copy{gap:var(--space-2, 8px)}.heading{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:var(--font-size-heading-1-desktop, 56px)}.breakpoint-desktop.heading-2 .heading{font-size:var(--font-size-heading-2-desktop, 44px)}.breakpoint-desktop.heading-3 .heading{font-size:var(--font-size-heading-3-desktop, 34px)}.breakpoint-desktop.heading-4 .heading{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-desktop.heading-5 .heading{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-mobile.heading-1 .heading{font-size:var(--font-size-heading-1-mobile, 38px)}.breakpoint-mobile.heading-2 .heading{font-size:var(--font-size-heading-2-mobile, 32px)}.breakpoint-mobile.heading-3 .heading{font-size:var(--font-size-heading-3-mobile, 25px)}.breakpoint-mobile.heading-4 .heading{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}.breakpoint-mobile.heading-5 .heading{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}.description{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:var(--font-size-body-large, 18px);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));white-space:pre-wrap}.breakpoint-mobile.heading-3 .description,.breakpoint-desktop.heading-4 .description,.breakpoint-mobile.heading-4 .description,.breakpoint-desktop.heading-5 .description,.breakpoint-mobile.heading-5 .description{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.description:empty{display:none}.buttons{display:flex;flex-direction:row;gap:var(--space-3, 12px)}.buttons:empty{display:none}.layout-horizontal .buttons{align-items:center}.text-left.layout-horizontal{flex-direction:row;align-items:center;gap:var(--space-4, 16px)}.text-left.layout-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.layout-horizontal.heading-3 .copy,.text-left.layout-horizontal.heading-4 .copy{max-width:840px}.text-left.layout-horizontal .buttons{flex-shrink:0}.layout-vertical .buttons{align-items:flex-start}.buttons.align-left{justify-content:flex-start}.buttons.align-center{justify-content:center}.buttons.align-right{justify-content:flex-end}.buttons.align-justify{justify-content:space-between}.breakpoint-mobile .buttons{flex-direction:column;align-items:stretch}.breakpoint-mobile .buttons.align-center{align-items:center}.breakpoint-mobile .buttons.align-right{align-items:flex-end}.breakpoint-mobile .buttons.align-left{align-items:flex-start}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
 const AfTypographyLockup = class {
     constructor(hostRef) {
@@ -14,27 +14,40 @@ const AfTypographyLockup = class {
          */
         this.breakpoint = 'desktop';
         /**
-         * Text alignment
+         * Text alignment for the entire lockup (heading and description).
+         * Can be overridden individually with headingAlignment and descriptionAlignment.
          */
         this.textAlignment = 'left';
         /**
-         * Button alignment (horizontal or vertical stacking)
+         * Button layout direction (horizontal or vertical stacking)
          */
-        this.buttonAlignment = 'vertical';
+        this.buttonLayout = 'vertical';
     }
     render() {
+        const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;
+        const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;
+        const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;
         const containerClasses = {
             'lockup': true,
             [`text-${this.textAlignment}`]: true,
-            [`button-${this.buttonAlignment}`]: true,
+            [`layout-${this.buttonLayout}`]: true,
             [`heading-${this.headingSize}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        const copyClasses = {
-            'copy': true
+        const headingClasses = {
+            'heading': true,
+            [`align-${effectiveHeadingAlignment}`]: true
+        };
+        const descriptionClasses = {
+            'description': true,
+            [`align-${effectiveDescriptionAlignment}`]: true
+        };
+        const buttonsClasses = {
+            'buttons': true,
+            [`align-${effectiveButtonsAlignment}`]: true
         };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '62d24f768270ca80fea5f47bbb98fcd51d1ce19f' }, h("div", { key: '7e4ce0a3702cd933d4c2cf902a9de7aa608d7f45', class: containerClasses }, h("div", { key: '2139a714f4c654343246ea9acc3a4158633fbea5', class: copyClasses, style: copyStyle }, h("div", { key: 'c912d098ef8ff24579a1798a04e636f3127b4142', class: "heading", part: "heading" }, h("slot", { key: '836fdd1778b706d239387845daa52fec6b38c8b8' })), h("div", { key: '4d1c9207a166aa4e717b655f8471de25bfb67c7a', class: "description", part: "body" }, h("slot", { key: 'f3d2f3fb15547ce230f868d92e14f0156d8a86b4', name: "description" }))), h("div", { key: '4567953f1da984155af2dce9f8eeda69201fd80a', class: "buttons", part: "buttons" }, h("slot", { key: 'ba914f51d04808f52deb6eb9dcecb40f9516057c', name: "buttons" })))));
+        return (h(Host, { key: '8cb507e162ef7a2bca263b7fecb7ef480382e615' }, h("div", { key: '94106d59d250a47ca21c15f2e8cb5c1bef7a3936', class: containerClasses }, h("div", { key: 'f465704d4f7b1bf77611e32958674a6093813abc', class: "copy", style: copyStyle }, h("div", { key: 'd4bcad644d1194c2ecfa593bf9b6a6f185e4a7c2', class: headingClasses, part: "heading" }, h("slot", { key: '97558da091bfc3b63cf57ec0816eb3b952cb201a' })), h("div", { key: 'c0839f719f0165ecaa296bb0be321a2d8c482e87', class: descriptionClasses, part: "body" }, h("slot", { key: '946a5ff890fb09144fee49687fb9de83f45c7aac', name: "description" }))), h("div", { key: '6f06d69183d006be1031eb1f73164f10811df9b1', class: buttonsClasses, part: "buttons" }, h("slot", { key: '253ba8fada86b55b5516d4dd8732aa19dfeda620', name: "buttons" })))));
     }
 };
 AfTypographyLockup.style = afTypographyLockupCss;

package/dist/esm/af-typography-lockup.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-typography-lockup.entry.js","sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.lockup {\n display: flex;\n flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap /\n/ Heading 1 desktop: 24px gap /\n.breakpoint-desktop.heading-1.lockup {\n gap: var(--space-6, 24px);\n}\n\n/ Heading 1 mobile: 20px gap /\n.breakpoint-mobile.heading-1.lockup {\n gap: var(--space-5, 20px);\n}\n\n/ Heading 2, 3 desktop: 16px gap /\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 2 mobile: 16px gap /\n.breakpoint-mobile.heading-2.lockup {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 3 mobile, 4 desktop, 5 desktop: 12px gap /\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n gap: var(--space-3, 12px);\n}\n\n/ Heading 4 mobile, 5 mobile: 8px gap /\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup {\n gap: var(--space-2, 8px);\n}\n\n/ Text alignment /\n.text-left {\n align-items: flex-start;\n}\n\n.text-center {\n align-items: center;\n}\n\n.text-left .copy,\n.text-left .heading,\n.text-left .description {\n text-align: left;\n}\n\n.text-center .copy,\n.text-center .heading,\n.text-center .description {\n text-align: center;\n}\n\n/ Copy section - base styles /\n.copy {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 840px;\n}\n\n/ Copy gap variations based on heading size and breakpoint /\n/ Heading 1 desktop: 24px gap /\n.breakpoint-desktop.heading-1 .copy {\n gap: var(--space-6, 24px);\n}\n\n/ Heading 1 mobile: 20px gap /\n.breakpoint-mobile.heading-1 .copy {\n gap: var(--space-5, 20px);\n}\n\n/ Heading 2, 3 desktop: 16px gap /\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 2 mobile: 16px gap /\n.breakpoint-mobile.heading-2 .copy {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 3 mobile, 4 desktop, 5 desktop: 12px gap /\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n gap: var(--space-3, 12px);\n}\n\n/ Heading 4 mobile, 5 mobile: 8px gap /\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy {\n gap: var(--space-2, 8px);\n}\n\n/ Heading styles /\n.heading {\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n white-space: pre-wrap;\n}\n\n/ Desktop heading sizes /\n.breakpoint-desktop.heading-1 .heading {\n font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: var(--font-size-heading-3-desktop, 34px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: var(--font-size-heading-4-desktop, 24px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: var(--font-size-heading-5-desktop, 20px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n/ Mobile heading sizes /\n.breakpoint-mobile.heading-1 .heading {\n font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: var(--font-size-heading-4-mobile, 20px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: var(--font-size-heading-5-mobile, 18px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n/ Description/body text - default (body/large) /\n.description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: var(--font-size-body-large, 18px);\n font-weight: var(--font-weight-regular, 400);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n white-space: pre-wrap;\n}\n\n/ Description text size variations - smaller for heading 3 mobile, 4, and 5 /\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n display: none;\n}\n\n/ Buttons section /\n.buttons {\n display: flex;\n gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n display: none;\n}\n\n/ Button alignment - horizontal (desktop only) /\n.button-horizontal .buttons {\n flex-direction: row;\n align-items: center;\n}\n\n.text-left.button-horizontal {\n flex-direction: row;\n align-items: center;\n gap: var(--space-4, 16px);\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\n}\n\n/ Heading 3, 4 horizontal: different max-width /\n.text-left.button-horizontal.heading-3 .copy,\n.text-left.button-horizontal.heading-4 .copy {\n max-width: 840px;\n}\n\n.text-left.button-horizontal .buttons {\n flex-shrink: 0;\n}\n\n/ Button alignment - vertical /\n.button-vertical .buttons {\n flex-direction: row;\n align-items: flex-start;\n}\n\n.text-center.button-vertical .buttons {\n justify-content: center;\n}\n\n/ Mobile button stacking - buttons stack vertically on mobile /\n.breakpoint-mobile .buttons {\n flex-direction: column;\n align-items: stretch;\n}\n\n.breakpoint-mobile.text-center .buttons {\n align-items: center;\n}\n\n/ Max width constraints for centered layouts /\n.text-center .copy {\n max-width: 840px;\n}\n\n/ Slot content styling /\n::slotted() {\n margin: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-typography-lockup',\n styleUrl: 'af-typography-lockup.css',\n shadow: true\n})\nexport class AfTypographyLockup {\n /*\n The heading size (1-5, where 1 is largest)\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 = 2;\n\n /\n The breakpoint for responsive typography\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Text alignment\n /\n @Prop() textAlignment: 'left' \| 'center' = 'left';\n\n /\n Button alignment (horizontal or vertical stacking)\n /\n @Prop() buttonAlignment: 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Maximum width for the copy section (in pixels)\n */\n @Prop() maxWidth?: number;\n\n render() {\n const containerClasses = {\n 'lockup': true,\n [`text-${this.textAlignment}`]: true,\n [`button-${this.buttonAlignment}`]: true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n const copyClasses = {\n 'copy': true\n };\n\n const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class={copyClasses} style={copyStyle}>\n <div class=\"heading\" part=\"heading\">\n <slot></slot>\n </div>\n <div class=\"description\" part=\"body\">\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"buttons\" part=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,yoIAAyoI;;MCO1pI,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAsB,MAAM;AAEjD;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAA8B,UAAU;AAwChE;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,CAAC,UAAU,IAAI,CAAC,eAAe,CAAE,CAAA,GAAG,IAAI;AACxC,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE;SACT;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;AAEzE,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-typography-lockup.entry.js","sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.lockup {\n display: flex;\n flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap /\n/ Heading 1 desktop: 24px gap /\n.breakpoint-desktop.heading-1.lockup {\n gap: var(--space-6, 24px);\n}\n\n/ Heading 1 mobile: 20px gap /\n.breakpoint-mobile.heading-1.lockup {\n gap: var(--space-5, 20px);\n}\n\n/ Heading 2, 3 desktop: 16px gap /\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 2 mobile: 16px gap /\n.breakpoint-mobile.heading-2.lockup {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 3 mobile, 4 desktop, 5 desktop: 12px gap /\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n gap: var(--space-3, 12px);\n}\n\n/ Heading 4 mobile, 5 mobile: 8px gap /\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup {\n gap: var(--space-2, 8px);\n}\n\n/ Container alignment (affects flexbox positioning) /\n.text-left {\n align-items: flex-start;\n}\n\n.text-center {\n align-items: center;\n}\n\n.text-right {\n align-items: flex-end;\n}\n\n.text-justify {\n align-items: stretch;\n}\n\n/ Individual text alignment classes /\n.align-left {\n text-align: left;\n --af-text-align: left;\n}\n\n.align-center {\n text-align: center;\n --af-text-align: center;\n}\n\n.align-right {\n text-align: right;\n --af-text-align: right;\n}\n\n.align-justify {\n text-align: justify;\n --af-text-align: justify;\n}\n\n/ Copy section - base styles /\n.copy {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 840px;\n}\n\n/ Copy gap variations based on heading size and breakpoint /\n/ Heading 1 desktop: 24px gap /\n.breakpoint-desktop.heading-1 .copy {\n gap: var(--space-6, 24px);\n}\n\n/ Heading 1 mobile: 20px gap /\n.breakpoint-mobile.heading-1 .copy {\n gap: var(--space-5, 20px);\n}\n\n/ Heading 2, 3 desktop: 16px gap /\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 2 mobile: 16px gap /\n.breakpoint-mobile.heading-2 .copy {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 3 mobile, 4 desktop, 5 desktop: 12px gap /\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n gap: var(--space-3, 12px);\n}\n\n/ Heading 4 mobile, 5 mobile: 8px gap /\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy {\n gap: var(--space-2, 8px);\n}\n\n/ Heading styles /\n.heading {\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n white-space: pre-wrap;\n}\n\n/ Desktop heading sizes /\n.breakpoint-desktop.heading-1 .heading {\n font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: var(--font-size-heading-3-desktop, 34px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: var(--font-size-heading-4-desktop, 24px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: var(--font-size-heading-5-desktop, 20px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n/ Mobile heading sizes /\n.breakpoint-mobile.heading-1 .heading {\n font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: var(--font-size-heading-4-mobile, 20px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: var(--font-size-heading-5-mobile, 18px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n/ Description/body text - default (body/large) /\n.description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: var(--font-size-body-large, 18px);\n font-weight: var(--font-weight-regular, 400);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n white-space: pre-wrap;\n}\n\n/ Description text size variations - smaller for heading 3 mobile, 4, and 5 /\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n display: none;\n}\n\n/ Buttons section /\n.buttons {\n display: flex;\n flex-direction: row;\n gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n display: none;\n}\n\n/ Button layout - horizontal (inline with copy) /\n.layout-horizontal .buttons {\n align-items: center;\n}\n\n.text-left.layout-horizontal {\n flex-direction: row;\n align-items: center;\n gap: var(--space-4, 16px);\n}\n\n.text-left.layout-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\n}\n\n/ Heading 3, 4 horizontal: different max-width /\n.text-left.layout-horizontal.heading-3 .copy,\n.text-left.layout-horizontal.heading-4 .copy {\n max-width: 840px;\n}\n\n.text-left.layout-horizontal .buttons {\n flex-shrink: 0;\n}\n\n/ Button layout - vertical (stacked below copy) /\n.layout-vertical .buttons {\n align-items: flex-start;\n}\n\n/ Button position alignment /\n.buttons.align-left {\n justify-content: flex-start;\n}\n\n.buttons.align-center {\n justify-content: center;\n}\n\n.buttons.align-right {\n justify-content: flex-end;\n}\n\n.buttons.align-justify {\n justify-content: space-between;\n}\n\n/ Mobile button stacking - buttons stack vertically on mobile /\n.breakpoint-mobile .buttons {\n flex-direction: column;\n align-items: stretch;\n}\n\n.breakpoint-mobile .buttons.align-center {\n align-items: center;\n}\n\n.breakpoint-mobile .buttons.align-right {\n align-items: flex-end;\n}\n\n.breakpoint-mobile .buttons.align-left {\n align-items: flex-start;\n}\n\n/ Max width constraints for centered layouts /\n.text-center .copy {\n max-width: 840px;\n}\n\n/ Slot content styling /\n::slotted() {\n margin: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\ntype TextAlign = 'left' \| 'center' \| 'right' \| 'justify';\n\n@Component({\n tag: 'af-typography-lockup',\n styleUrl: 'af-typography-lockup.css',\n shadow: true\n})\nexport class AfTypographyLockup {\n /*\n The heading size (1-5, where 1 is largest)\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 = 2;\n\n /\n The breakpoint for responsive typography\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Text alignment for the entire lockup (heading and description).\n * Can be overridden individually with headingAlignment and descriptionAlignment.\n /\n @Prop() textAlignment: TextAlign = 'left';\n\n /\n Heading text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() headingAlignment?: TextAlign;\n\n /\n Description text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() descriptionAlignment?: TextAlign;\n\n /\n Button layout direction (horizontal or vertical stacking)\n /\n @Prop() buttonLayout: 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Buttons position alignment. Falls back to textAlignment if not specified.\n /\n @Prop() buttonsAlignment?: TextAlign;\n\n /\n Maximum width for the copy section (in pixels)\n */\n @Prop() maxWidth?: number;\n\n render() {\n const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n const containerClasses = {\n 'lockup': true,\n [`text-${this.textAlignment}`]: true,\n [`layout-${this.buttonLayout}`]: true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n const headingClasses = {\n 'heading': true,\n [`align-${effectiveHeadingAlignment}`]: true\n };\n\n const descriptionClasses = {\n 'description': true,\n [`align-${effectiveDescriptionAlignment}`]: true\n };\n\n const buttonsClasses = {\n 'buttons': true,\n [`align-${effectiveButtonsAlignment}`]: true\n };\n\n const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"copy\" style={copyStyle}>\n <div class={headingClasses} part=\"heading\">\n <slot></slot>\n </div>\n <div class={descriptionClasses} part=\"body\">\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class={buttonsClasses} part=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,2+IAA2+I;;MCS5/I,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;AAGG;AACK,QAAA,IAAa,CAAA,aAAA,GAAc,MAAM;AAYzC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAA8B,UAAU;AA4D7D;IAhDC,MAAM,GAAA;QACJ,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa;QAC7E,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,aAAa;QACrF,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa;AAE7E,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,CAAC,UAAU,IAAI,CAAC,YAAY,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,CAAS,MAAA,EAAA,yBAAyB,CAAE,CAAA,GAAG;SACzC;AAED,QAAA,MAAM,kBAAkB,GAAG;AACzB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,CAAS,MAAA,EAAA,6BAA6B,CAAE,CAAA,GAAG;SAC7C;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,CAAS,MAAA,EAAA,yBAAyB,CAAE,CAAA,GAAG;SACzC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;AAEzE,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,EAAA,EAChC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM,EAAA,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS,EAAA,EACxC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}

package/dist/esm/af-video-container.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-B0LVveHp.js';
 const afVideoContainerCss = ".sc-af-video-container-h{display:block;width:100%}.video-container.sc-af-video-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:var(--space-10, 40px)}.video-container__top.sc-af-video-container,.video-container__bottom.sc-af-video-container{width:100%;display:flex;flex-direction:column;align-items:center}.video-container__top.sc-af-video-container:empty,.video-container__bottom.sc-af-video-container:empty{display:none}.video-container__video.sc-af-video-container{width:100%;max-width:1024px}.video-container__thumbnail-wrapper.sc-af-video-container{position:absolute;inset:0;border-radius:var(--radii-video-crop, 16px);overflow:hidden;background-color:var(--colour-inkwell-400, #2b484f)}.video-container__thumbnail.sc-af-video-container{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}.video-container__play-button.sc-af-video-container{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;padding:24px;border-radius:var(--radii-button, 9999px);background-color:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));cursor:pointer;transition:background-color 0.2s ease;color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b))}.video-container__play-button.sc-af-video-container:hover{background-color:var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2))}.video-container__play-button.sc-af-video-container:focus-visible{outline:2px solid var(--colour-brand-ice, #a6fffb);outline-offset:2px}@media (max-width: 768px){.video-container.sc-af-video-container{gap:var(--space-8, 32px)}.video-container__play-button.sc-af-video-container{padding:12px}}";
@@ -24,7 +24,7 @@ const AfVideoContainer = class {
         };
     }
     render() {
-        return (h(Host, { key: 'b31355a1ccf3cc4f9655f9c78d16f70fb104a671' }, h("div", { key: 'ebd03ff2668174d400d3d09488030d38d1a25fe8', class: "video-container" }, h("div", { key: 'af32cf3f6fec012e95d35d4224daebdfd64917b5', class: "video-container__top" }, h("slot", { key: '0258f4b6a027b09ecefd4ff6c7f2a62db6075847', name: "top" })), h("div", { key: 'fb74dae0250cfdf22b8c5503cd993ac67894276e', class: "video-container__video" }, h("af-aspect-ratio", { key: '88445a4ae1125882d3dc8fffc83fb1f880857fae', ratio: "16:9" }, h("div", { key: 'd87f8d15036026b04330e23395f95ad8363d72a3', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'e1327574236c73cc6c5b5a7a820c3905d2307047', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'c278f6944c5d69fec242a8291655985a20a7896f', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: 'df9ca50c0938d8539c7a79fb6f5bceb6326ed96c', name: "play", size: 24 }))))), h("div", { key: '3e2ba7be65431315fd3996fdadfbc45acb1be76b', class: "video-container__bottom" }, h("slot", { key: '10d64457339942b3bde412a740a66bf9665e8033', name: "bottom" })))));
+        return (h(Host, { key: '8ea21d7dbe736b27b79c0fc7890796f1b1b282aa' }, h("div", { key: '92bb0cbf3d58a3304f891109433f965e7fd23816', class: "video-container" }, h("div", { key: 'ecec6d6ca2a76e5dd06d3b2e9bc370ac3e41ba00', class: "video-container__top" }, h("slot", { key: '2d8243cc440b70409910953186ae6ba36e36d4ca', name: "top" })), h("div", { key: '3bbafe7f6cbaa57da83c576f7fa5a17f2d8244a1', class: "video-container__video" }, h("af-aspect-ratio", { key: '7f1504a644c406c7f61b5a01707778c104746789', ratio: "16:9" }, h("div", { key: 'fe18441bf7e4b46e123d1d18a394336a416cf373', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'd624e7c7299f465d8ffde109e5215512126fc60c', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'bef98e5cb47e9a9f9849547edd3c8f56baff778e', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: 'e3c6cbb6236d1a60a39e5081ad4285896791cd9d', name: "play", size: 24 }))))), h("div", { key: '60ef6d0a51d15b03af7b3ab09d2d8214daedbcab', class: "video-container__bottom" }, h("slot", { key: 'fec2c7b7101caf72142fda6a0c1fa281785b08e3', name: "bottom" })))));
     }
 };
 AfVideoContainer.style = afVideoContainerCss;