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

@affinda/wc 0.0.19 → 0.0.21

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

Files changed (466) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-testimonial.entry.cjs.js","sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.testimonial-card {\n /* Uses themed level-1 background from parent Section /\n background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));\n border-radius: var(--border-radius-card-level-1, 32px);\n overflow: hidden;\n display: flex;\n height: 544px;\n box-sizing: border-box;\n}\n\n/ Image side - 40.5% of card width (519px of 1280px in Figma) /\n.testimonial-image {\n position: relative;\n width: 40.5%;\n min-width: 300px;\n / Minimum for readability /\n max-width: 519px;\n / Cap at Figma design width /\n height: 100%;\n / Dark background for image overlay effect - always dark regardless of theme /\n background: var(--colour-brand-inkwell, #14343b);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.testimonial-bg-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.7;\n}\n\n.testimonial-logo {\n position: relative;\n z-index: 1;\n padding: 0 108px;\n max-width: 100%;\n}\n\n.testimonial-logo img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n/ Content side /\n.testimonial-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding: 48px;\n / Subtle border using themed border token /\n border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n / Allow flex item to shrink /\n overflow: hidden;\n}\n\n.testimonial-quote-icon {\n width: 48px;\n height: 48px;\n / Quote icon uses themed secondary heading color (gold/ochre accent) /\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n flex-shrink: 0;\n}\n\n/ Quote text - layout only, typography comes from af-text /\n.testimonial-text {\n max-height: 155px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/ Attribution uses body-dark color for emphasis /\n.testimonial-attribution {\n --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n}\n\n.testimonial-stats {\n display: flex;\n gap: 32px;\n width: 100%;\n flex-shrink: 0;\n}\n\n.testimonial-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n / Themed border color /\n border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));\n padding-top: 32px;\n flex-shrink: 0;\n min-height: 48px;\n}\n\n.testimonial-nav {\n display: flex;\n gap: 12px;\n}\n\n.testimonial-nav-buttons {\n display: flex;\n gap: 12px;\n}\n\n/ CTA button is now handled by af-button atom component /","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'af-testimonial',\n styleUrl: 'af-testimonial.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonial {\n /\n Background image URL for the testimonial card\n /\n @Prop() backgroundImage?: string;\n\n /\n Company logo URL\n /\n @Prop() logoImage?: string;\n\n /\n Testimonial quote text\n /\n @Prop() quote!: string;\n\n /\n Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n /\n @Prop() attribution!: string;\n\n /\n Link to full case study\n /\n @Prop() readMoreLink?: string;\n\n /\n Whether to show built-in navigation buttons (used when in a carousel)\n /\n @Prop({ mutable: true }) showNavigation: boolean = false;\n\n /\n Whether the previous button is enabled\n /\n @Prop({ mutable: true }) hasPrev: boolean = false;\n\n /\n Whether the next button is enabled\n /\n @Prop({ mutable: true }) hasNext: boolean = false;\n\n /\n Emitted when the previous button is clicked\n /\n @Event() navPrev!: EventEmitter<void>;\n\n /\n Emitted when the next button is clicked\n /\n @Event() navNext!: EventEmitter<void>;\n\n private handlePrev = () => {\n this.navPrev.emit();\n };\n\n private handleNext = () => {\n this.navNext.emit();\n };\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-card\">\n {/ Image side /}\n <div class=\"testimonial-image\">\n {this.backgroundImage && (\n <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n )}\n {this.logoImage && (\n <div class=\"testimonial-logo\">\n <img src={this.logoImage} alt=\"Company logo\" />\n </div>\n )}\n </div>\n\n {/ Content side /}\n <div class=\"testimonial-content\">\n <div class=\"testimonial-quote-section\">\n {/ Quote icon - using af-icon atom with slot for flexibility /}\n <div class=\"testimonial-quote-icon\">\n <slot name=\"quote-icon\">\n <af-icon name=\"quote\" size={48} />\n </slot>\n </div>\n\n {/ Quote text - using af-text atom for proper theming /}\n <af-text variant=\"xlarge\" class=\"testimonial-text\">{this.quote}</af-text>\n {/ Attribution - using af-text atom with dark variant styling /}\n <af-text variant=\"xlarge\" class=\"testimonial-attribution\">{this.attribution}</af-text>\n </div>\n\n {/ Statistics slot /}\n <div class=\"testimonial-stats\">\n <slot name=\"stats\"></slot>\n </div>\n\n {/ Footer with navigation and CTA */}\n <div class=\"testimonial-footer\">\n <div class=\"testimonial-nav\">\n {this.showNavigation ? (\n // Render built-in navigation buttons\n <div class=\"testimonial-nav-buttons\">\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasPrev}\n onClick={this.handlePrev}\n ariaLabel=\"Previous testimonial\"\n >\n <af-icon name=\"arrow-left\" size={24} />\n </af-icon-button>\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasNext}\n onClick={this.handleNext}\n ariaLabel=\"Next testimonial\"\n >\n <af-icon name=\"arrow-right\" size={24} />\n </af-icon-button>\n </div>\n ) : (\n // Allow custom navigation via slot\n <slot name=\"navigation\"></slot>\n )}\n </div>\n {this.readMoreLink && (\n <af-button variant=\"secondary\" href={this.readMoreLink}>\n Read full story\n <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n </af-button>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":["h","Host"],"mappings":"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"}
1	+ {"version":3,"file":"af-testimonial.entry.cjs.js","sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.testimonial-card {\n /* Uses themed level-1 background from parent Section /\n background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));\n border-radius: var(--border-radius-card-level-1, 32px);\n overflow: hidden;\n display: flex;\n height: 544px;\n box-sizing: border-box;\n}\n\n/ Image side - 40.5% of card width (519px of 1280px in Figma) /\n.testimonial-image {\n position: relative;\n width: 50%;\n min-width: 300px;\n / Minimum for readability /\n max-width: 519px;\n / Cap at Figma design width /\n height: 100%;\n / Dark background for image overlay effect - always dark regardless of theme /\n background: var(--colour-brand-inkwell, #14343b);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.testimonial-bg-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.7;\n}\n\n.testimonial-logo {\n position: relative;\n z-index: 1;\n padding: 0 108px;\n max-width: 100%;\n}\n\n.testimonial-logo img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n/ Content side /\n.testimonial-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding: 48px;\n / Subtle border using themed border token /\n border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n / Allow flex item to shrink /\n overflow: hidden;\n}\n\n.testimonial-quote-icon {\n width: 48px;\n height: 48px;\n / Quote icon uses themed secondary heading color (gold/ochre accent) /\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n flex-shrink: 0;\n}\n\n/ Quote text — 22px / 140% per Webflow reference. Accepts either the\n `quote` prop (rendered as plain text) or the `quote-body` slot (rich). /\n.testimonial-text {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 22px;\n line-height: 1.4;\n font-weight: var(--font-weight-regular, 400);\n color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n.testimonial-text ::slotted(p),\n.testimonial-text p {\n font: inherit;\n color: inherit;\n margin: 0 0 12px 0;\n}\n.testimonial-text ::slotted(p:last-child),\n.testimonial-text p:last-child {\n margin-bottom: 0;\n}\n.testimonial-text ::slotted(ul),\n.testimonial-text ul {\n margin: 0 0 12px 0;\n padding-left: 20px;\n}\n\n/ Attribution uses body-dark color for emphasis /\n.testimonial-attribution {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n margin-top: 12px;\n}\n\n.testimonial-stats {\n display: flex;\n gap: 32px;\n width: 100%;\n flex-shrink: 0;\n}\n\n.testimonial-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n / Themed border color /\n border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));\n padding-top: 32px;\n flex-shrink: 0;\n min-height: 48px;\n}\n\n.testimonial-nav {\n display: flex;\n gap: 12px;\n}\n\n.testimonial-nav-buttons {\n display: flex;\n gap: 12px;\n}\n\n/ CTA button is now handled by af-button atom component /","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/\n @slot quote-body - Rich quote content (paragraphs, lists). Overrides the\n * `quote` string prop when provided. Use for testimonials that include\n * multiple paragraphs, bulleted points, or inline emphasis.\n * @slot quote-icon - Quote icon (defaults to af-icon name=\"quote\").\n * @slot stats - Statistic items (af-testimonial-stat components).\n * @slot navigation - Custom nav controls (when not using built-in ones).\n /\n@Component({\n tag: 'af-testimonial',\n styleUrl: 'af-testimonial.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonial {\n /\n Background image URL for the testimonial card\n /\n @Prop() backgroundImage?: string;\n\n /\n Company logo URL\n /\n @Prop() logoImage?: string;\n\n /\n Testimonial quote text. Falls back to the `quote-body` slot if that\n * slot has content.\n /\n @Prop() quote?: string;\n\n /\n Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n /\n @Prop() attribution!: string;\n\n /\n Link to full case study\n /\n @Prop() readMoreLink?: string;\n\n /\n Whether to show built-in navigation buttons (used when in a carousel)\n /\n @Prop({ mutable: true }) showNavigation: boolean = false;\n\n /\n Whether the previous button is enabled\n /\n @Prop({ mutable: true }) hasPrev: boolean = false;\n\n /\n Whether the next button is enabled\n /\n @Prop({ mutable: true }) hasNext: boolean = false;\n\n /\n Emitted when the previous button is clicked\n /\n @Event() navPrev!: EventEmitter<void>;\n\n /\n Emitted when the next button is clicked\n /\n @Event() navNext!: EventEmitter<void>;\n\n private handlePrev = () => {\n this.navPrev.emit();\n };\n\n private handleNext = () => {\n this.navNext.emit();\n };\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-card\">\n {/ Image side /}\n <div class=\"testimonial-image\">\n {this.backgroundImage && (\n <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n )}\n {this.logoImage && (\n <div class=\"testimonial-logo\">\n <img src={this.logoImage} alt=\"Company logo\" />\n </div>\n )}\n </div>\n\n {/ Content side /}\n <div class=\"testimonial-content\">\n <div class=\"testimonial-quote-section\">\n {/ Quote icon - using af-icon atom with slot for flexibility /}\n <div class=\"testimonial-quote-icon\">\n <slot name=\"quote-icon\">\n <af-icon name=\"quote\" size={48} />\n </slot>\n </div>\n\n {/ Quote text — slot takes priority; falls back to prop. /}\n <div class=\"testimonial-text\">\n <slot name=\"quote-body\">{this.quote}</slot>\n </div>\n {/ Attribution /}\n <div class=\"testimonial-attribution\">{this.attribution}</div>\n </div>\n\n {/ Statistics slot /}\n <div class=\"testimonial-stats\">\n <slot name=\"stats\"></slot>\n </div>\n\n {/ Footer with navigation and CTA */}\n <div class=\"testimonial-footer\">\n <div class=\"testimonial-nav\">\n {this.showNavigation ? (\n // Render built-in navigation buttons\n <div class=\"testimonial-nav-buttons\">\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasPrev}\n onClick={this.handlePrev}\n ariaLabel=\"Previous testimonial\"\n >\n <af-icon name=\"arrow-left\" size={24} />\n </af-icon-button>\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasNext}\n onClick={this.handleNext}\n ariaLabel=\"Next testimonial\"\n >\n <af-icon name=\"arrow-right\" size={24} />\n </af-icon-button>\n </div>\n ) : (\n // Allow custom navigation via slot\n <slot name=\"navigation\"></slot>\n )}\n </div>\n {this.readMoreLink && (\n <af-button variant=\"secondary\" href={this.readMoreLink}>\n Read full story\n <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n </af-button>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -21,7 +21,7 @@ const AfTextImageNest = class {
             'nest__grid': true,
             [`grid-${this.layout}`]: true,
         };
-        return (index.h(index.Host, { key: 'fda547a6eaca9705f52fbbed04113534e438f3c8' }, index.h("div", { key: '565730e0ed6a4b127ef191536b1f10f1c8b417d6', class: containerClasses }, index.h("div", { key: '65e97a6335b837f1ffd259e5c128c01c1c212f17', class: "nest__content" }, index.h("div", { key: 'c6eab25a6e3fc7c6c864a6aa6182c6adc7b22032', class: gridClasses }, index.h("slot", { key: 'e936abaaf1854605ebb1be90130df7d2d100ef49' })), index.h("div", { key: '11f48762fb08c787ac90256b55bb1a351e92c505', class: "nest__footer" }, index.h("slot", { key: '8a0f8c1ad853f3aa9deea5df5a3f0b565a1f631e', name: "buttons" }))))));
+        return (index.h(index.Host, { key: 'b4400fe3d9f67e8966c653af0f4207fe28d89c2c' }, index.h("div", { key: 'e07cea2ad66bb7bf1f666417382881958ef4e7f2', class: containerClasses }, index.h("div", { key: '81376b5775f3059d3b26ae64eb3e9587965a4468', class: "nest__content" }, index.h("div", { key: '2f3d5ba877aef7dbae680ebcc3d83fcdc0242cb9', class: gridClasses }, index.h("slot", { key: 'cf907125930e3799d05b7b8b4ad498fe1bd174c9' })), index.h("div", { key: '9964efe303d3a98e65516d824b4eaccc1e14834b', class: "nest__footer" }, index.h("slot", { key: '93db921b203add1ec75f10c584669a6e13a1369e', name: "buttons" }))))));
     }
 };
 AfTextImageNest.style = afTextImageNestCss;

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

@@ -2,7 +2,7 @@
 var index = require('./index-n-fnurTP.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}";
+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}.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:normal}.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:normal}.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}";
 const AfTextImage = class {
     constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-text-image.entry.cjs.js","sources":["src/components/af-text-image/af-text-image.css?tag=af-text-image&encapsulation=scoped","src/components/af-text-image/af-text-image.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Container Layout\n ========================================================================== /\n\n.text-image {\n display: flex;\n width: 100%;\n}\n\n/ Side-by-side layout (default for 1/3 and 1/4 proportions) /\n.text-image--side-by-side {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--space-8, 32px);\n}\n\n.text-image--image-left {\n flex-direction: row-reverse;\n}\n\n.text-image--image-right {\n flex-direction: row;\n}\n\n/ Full-width layout (100% proportion) /\n.text-image--full-width {\n flex-direction: column;\n gap: var(--space-8, 32px);\n}\n\n/ ==========================================================================\n Content Area (Typography Lockups Container)\n ========================================================================== /\n\n.text-image__content {\n display: flex;\n flex-direction: column;\n gap: 56px;\n flex: 1;\n min-width: 0;\n}\n\n/ Proportion-based content sizing for side-by-side /\n.text-image--proportion-1-3 .text-image__content {\n flex: 2;\n}\n\n.text-image--proportion-1-4 .text-image__content {\n flex: 3;\n}\n\n.text-image--proportion-100 .text-image__content {\n flex: none;\n width: 100%;\n}\n\n/ Padding for content when image is on opposite side /\n.text-image--image-right .text-image__content {\n padding-right: var(--space-8, 32px);\n}\n\n.text-image--image-left .text-image__content {\n padding-left: var(--space-8, 32px);\n}\n\n.text-image--full-width .text-image__content {\n padding: 0;\n}\n\n/ ==========================================================================\n Typography Lockup\n ========================================================================== /\n\n.text-image__lockup {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n}\n\n.text-image__copy {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n max-width: 840px;\n width: 100%;\n}\n\n/ Heading styles - inherits color from theme context /\n.text-image__heading {\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: var(--font-size-heading-3-desktop, 34px);\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n color: var(--af-typography-heading-primary, #14343B);\n white-space: pre-wrap;\n}\n\n.text-image__heading:empty {\n display: none;\n}\n\n/ Description/body text - inherits color from theme context /\n.text-image__description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: var(--font-size-body-large, 18px);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.text-image__description:empty {\n display: none;\n}\n\n/ Buttons section - wrapper for slotted ButtonGroup /\n.text-image__buttons {\n display: block;\n}\n\n.text-image__buttons:empty {\n display: none;\n}\n\n/ ==========================================================================\n Image Area\n ========================================================================== /\n\n.text-image__image-wrapper {\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--radius-md, 12px);\n}\n\n/ Proportion-based image sizing for side-by-side /\n.text-image--proportion-1-3 .text-image__image-wrapper {\n flex: 1;\n min-width: 0;\n}\n\n.text-image--proportion-1-4 .text-image__image-wrapper {\n flex: 1;\n min-width: 0;\n}\n\n.text-image--proportion-100 .text-image__image-wrapper {\n width: 100%;\n}\n\n/ ==========================================================================\n Mobile Responsive Styles\n ========================================================================== /\n\n@media (max-width: 768px) {\n / Stack everything vertically on mobile /\n .text-image--side-by-side {\n flex-direction: column;\n gap: var(--space-6, 24px);\n }\n\n / Reset order - text always first on mobile /\n .text-image--image-left,\n .text-image--image-right {\n flex-direction: column;\n }\n\n / Remove side padding on mobile /\n .text-image--image-right .text-image__content,\n .text-image--image-left .text-image__content {\n padding: 0;\n }\n\n / Full width for all proportions on mobile /\n .text-image__content,\n .text-image__image-wrapper {\n flex: none !important;\n width: 100%;\n }\n\n / Smaller heading on mobile /\n .text-image__heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n }\n\n / Smaller body text for full-width on mobile /\n .text-image--proportion-100 .text-image__description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n }\n\n / On mobile, ButtonGroup handles its own responsive behavior /\n\n / Smaller lockup gap on mobile for full-width /\n .text-image--proportion-100 .text-image__lockup {\n gap: var(--space-3, 12px);\n }\n\n .text-image--proportion-100 .text-image__copy {\n gap: var(--space-3, 12px);\n }\n\n / Smaller border radius on mobile /\n .text-image__image-wrapper {\n border-radius: var(--radius-sm, 8px);\n }\n}\n\n/ ==========================================================================\n Slot Content Styling\n ========================================================================== /\n\n::slotted() {\n margin: 0;\n}\n\n::slotted(p) {\n margin: 0;\n}\n\n\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/*\n TextImage composite component that combines typography content with an image.\n * Supports various layout configurations with image position and proportion options.\n /\n@Component({\n tag: 'af-text-image',\n styleUrl: 'af-text-image.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTextImage {\n /\n Position of the image relative to the text content\n /\n @Prop() imagePosition: 'left' \| 'right' = 'right';\n\n /\n Proportion of the image in the layout\n * - '1/3': Image takes 1/3 of the width (text takes 2/3)\n * - '1/4': Image takes 1/4 of the width (text takes 3/4)\n * - '100%': Image takes full width below text\n /\n @Prop() imageProportion: '1/3' \| '1/4' \| '100%' = '1/3';\n\n /\n Image source URL\n /\n @Prop() src?: string;\n\n /\n Image alt text for accessibility\n /\n @Prop() alt: string = '';\n\n /\n Whether to show a second typography lockup section\n */\n @Prop() showSecondLockup: boolean = false;\n\n render() {\n const isFullWidth = this.imageProportion === '100%';\n const isImageLeft = this.imagePosition === 'left';\n\n const containerClasses = {\n 'text-image': true,\n 'text-image--full-width': isFullWidth,\n 'text-image--side-by-side': !isFullWidth,\n 'text-image--image-left': isImageLeft && !isFullWidth,\n 'text-image--image-right': !isImageLeft && !isFullWidth,\n [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,\n };\n\n const renderTypographyLockup = (isSecond: boolean = false) => {\n const prefix = isSecond ? 'second-' : '';\n return (\n <div class={`text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}`}>\n <div class=\"text-image__copy\">\n <div class=\"text-image__heading\">\n <slot name={isSecond ? 'second-heading' : undefined}></slot>\n </div>\n <div class=\"text-image__description\">\n <slot name={`${prefix}description`}></slot>\n </div>\n </div>\n <div class=\"text-image__buttons\">\n <slot name={`${prefix}buttons`}></slot>\n </div>\n </div>\n );\n };\n\n const renderImage = () => {\n if (!this.src) return null;\n return (\n <div class=\"text-image__image-wrapper\">\n <af-image src={this.src} alt={this.alt}></af-image>\n </div>\n );\n };\n\n // For full-width layout, text is always above image\n if (isFullWidth) {\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"text-image__content\">\n {renderTypographyLockup()}\n {this.showSecondLockup && renderTypographyLockup(true)}\n </div>\n {renderImage()}\n </div>\n </Host>\n );\n }\n\n // For side-by-side layouts\n const textContent = (\n <div class=\"text-image__content\">\n {renderTypographyLockup()}\n {this.showSecondLockup && renderTypographyLockup(true)}\n </div>\n );\n\n const imageContent = renderImage();\n\n return (\n <Host>\n <div class={containerClasses}>\n {isImageLeft ? (\n [imageContent, textContent]\n ) : (\n [textContent, imageContent]\n )}\n </div>\n </Host>\n );\n }\n}\n\n\n\n"],"names":["h","Host"],"mappings":"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"}
1	+ {"version":3,"file":"af-text-image.entry.cjs.js","sources":["src/components/af-text-image/af-text-image.css?tag=af-text-image&encapsulation=scoped","src/components/af-text-image/af-text-image.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Container Layout\n ========================================================================== /\n\n.text-image {\n display: flex;\n width: 100%;\n}\n\n/ Side-by-side layout (default for 1/3 and 1/4 proportions) /\n.text-image--side-by-side {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--space-8, 32px);\n}\n\n/ DOM order is controlled from the TSX (image first for image-left, text\n first for image-right), so both variants use plain row flow. /\n.text-image--image-left {\n flex-direction: row;\n}\n\n.text-image--image-right {\n flex-direction: row;\n}\n\n/ Full-width layout (100% proportion) /\n.text-image--full-width {\n flex-direction: column;\n gap: var(--space-8, 32px);\n}\n\n/ ==========================================================================\n Content Area (Typography Lockups Container)\n ========================================================================== /\n\n.text-image__content {\n display: flex;\n flex-direction: column;\n gap: 56px;\n flex: 1;\n min-width: 0;\n}\n\n/ Proportion-based content sizing for side-by-side /\n.text-image--proportion-1-3 .text-image__content {\n flex: 2;\n}\n\n.text-image--proportion-1-4 .text-image__content {\n flex: 3;\n}\n\n.text-image--proportion-100 .text-image__content {\n flex: none;\n width: 100%;\n}\n\n/ Padding for content when image is on opposite side /\n.text-image--image-right .text-image__content {\n padding-right: var(--space-8, 32px);\n}\n\n.text-image--image-left .text-image__content {\n padding-left: var(--space-8, 32px);\n}\n\n.text-image--full-width .text-image__content {\n padding: 0;\n}\n\n/ ==========================================================================\n Typography Lockup\n ========================================================================== /\n\n.text-image__lockup {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n}\n\n.text-image__copy {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n max-width: 840px;\n width: 100%;\n}\n\n/ Heading styles - inherits color from theme context /\n.text-image__heading {\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: var(--font-size-heading-3-desktop, 34px);\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n color: var(--af-typography-heading-primary, #14343B);\n white-space: normal;\n}\n\n.text-image__heading:empty {\n display: none;\n}\n\n/ Description/body text - inherits color from theme context /\n.text-image__description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: var(--font-size-body-large, 18px);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, #2B484F);\n white-space: normal;\n}\n\n.text-image__description:empty {\n display: none;\n}\n\n/ Buttons section - wrapper for slotted ButtonGroup /\n.text-image__buttons {\n display: block;\n}\n\n.text-image__buttons:empty {\n display: none;\n}\n\n/ ==========================================================================\n Image Area\n ========================================================================== /\n\n.text-image__image-wrapper {\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--radius-md, 12px);\n}\n\n/ Proportion-based image sizing for side-by-side /\n.text-image--proportion-1-3 .text-image__image-wrapper {\n flex: 1;\n min-width: 0;\n}\n\n.text-image--proportion-1-4 .text-image__image-wrapper {\n flex: 1;\n min-width: 0;\n}\n\n.text-image--proportion-100 .text-image__image-wrapper {\n width: 100%;\n}\n\n/ ==========================================================================\n Mobile Responsive Styles\n ========================================================================== /\n\n@media (max-width: 768px) {\n / Stack everything vertically on mobile /\n .text-image--side-by-side {\n flex-direction: column;\n gap: var(--space-6, 24px);\n }\n\n / Reset order - text always first on mobile /\n .text-image--image-left,\n .text-image--image-right {\n flex-direction: column;\n }\n\n / Remove side padding on mobile /\n .text-image--image-right .text-image__content,\n .text-image--image-left .text-image__content {\n padding: 0;\n }\n\n / Full width for all proportions on mobile /\n .text-image__content,\n .text-image__image-wrapper {\n flex: none !important;\n width: 100%;\n }\n\n / Smaller heading on mobile /\n .text-image__heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n }\n\n / Smaller body text for full-width on mobile /\n .text-image--proportion-100 .text-image__description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n }\n\n / On mobile, ButtonGroup handles its own responsive behavior /\n\n / Smaller lockup gap on mobile for full-width /\n .text-image--proportion-100 .text-image__lockup {\n gap: var(--space-3, 12px);\n }\n\n .text-image--proportion-100 .text-image__copy {\n gap: var(--space-3, 12px);\n }\n\n / Smaller border radius on mobile /\n .text-image__image-wrapper {\n border-radius: var(--radius-sm, 8px);\n }\n}\n\n/ ==========================================================================\n Slot Content Styling\n ========================================================================== /\n\n::slotted() {\n margin: 0;\n}\n\n::slotted(p) {\n margin: 0;\n}\n\n\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/*\n TextImage composite component that combines typography content with an image.\n * Supports various layout configurations with image position and proportion options.\n /\n@Component({\n tag: 'af-text-image',\n styleUrl: 'af-text-image.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTextImage {\n /\n Position of the image relative to the text content\n /\n @Prop() imagePosition: 'left' \| 'right' = 'right';\n\n /\n Proportion of the image in the layout\n * - '1/3': Image takes 1/3 of the width (text takes 2/3)\n * - '1/4': Image takes 1/4 of the width (text takes 3/4)\n * - '100%': Image takes full width below text\n /\n @Prop() imageProportion: '1/3' \| '1/4' \| '100%' = '1/3';\n\n /\n Image source URL\n /\n @Prop() src?: string;\n\n /\n Image alt text for accessibility\n /\n @Prop() alt: string = '';\n\n /\n Whether to show a second typography lockup section\n */\n @Prop() showSecondLockup: boolean = false;\n\n render() {\n const isFullWidth = this.imageProportion === '100%';\n const isImageLeft = this.imagePosition === 'left';\n\n const containerClasses = {\n 'text-image': true,\n 'text-image--full-width': isFullWidth,\n 'text-image--side-by-side': !isFullWidth,\n 'text-image--image-left': isImageLeft && !isFullWidth,\n 'text-image--image-right': !isImageLeft && !isFullWidth,\n [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,\n };\n\n const renderTypographyLockup = (isSecond: boolean = false) => {\n const prefix = isSecond ? 'second-' : '';\n return (\n <div class={`text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}`}>\n <div class=\"text-image__copy\">\n <div class=\"text-image__heading\">\n <slot name={isSecond ? 'second-heading' : undefined}></slot>\n </div>\n <div class=\"text-image__description\">\n <slot name={`${prefix}description`}></slot>\n </div>\n </div>\n <div class=\"text-image__buttons\">\n <slot name={`${prefix}buttons`}></slot>\n </div>\n </div>\n );\n };\n\n const renderImage = () => {\n if (!this.src) return null;\n return (\n <div class=\"text-image__image-wrapper\">\n <af-image src={this.src} alt={this.alt}></af-image>\n </div>\n );\n };\n\n // For full-width layout, text is always above image\n if (isFullWidth) {\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"text-image__content\">\n {renderTypographyLockup()}\n {this.showSecondLockup && renderTypographyLockup(true)}\n </div>\n {renderImage()}\n </div>\n </Host>\n );\n }\n\n // For side-by-side layouts\n const textContent = (\n <div class=\"text-image__content\">\n {renderTypographyLockup()}\n {this.showSecondLockup && renderTypographyLockup(true)}\n </div>\n );\n\n const imageContent = renderImage();\n\n return (\n <Host>\n <div class={containerClasses}>\n {isImageLeft ? (\n [imageContent, textContent]\n ) : (\n [textContent, imageContent]\n )}\n </div>\n </Host>\n );\n }\n}\n\n\n\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/af-theme-override.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-n-fnurTP.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 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-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-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-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-button-ghost-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-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-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-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-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-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-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}";
 const AfThemeOverride = class {
     constructor(hostRef) {
@@ -14,7 +14,7 @@ const AfThemeOverride = class {
         this.theme = 'white';
     }
     render() {
-        return (index.h(index.Host, { key: '303d518d6047bb01db2b315a93169014c849a78e' }, index.h("div", { key: '6d208731e221d7514d384543fe79e68c0830a3fb', class: `theme-override theme-${this.theme}` }, index.h("slot", { key: '75de070f92a698b39286eacc5981b3d7d642b49a' }))));
+        return (index.h(index.Host, { key: '50001378d57949164fc08ca1789372a448be5544' }, index.h("div", { key: '9404950a7fad99904b3600a234a9d1ea2d424054', class: `theme-override theme-${this.theme}` }, index.h("slot", { key: 'c5db6376b0e3dbb08eafb48f22ae8a70364deb3e' }))));
     }
 };
 AfThemeOverride.style = afThemeOverrideCss;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-theme-override.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,KAAK,EAAE,EAAA,EAC9CA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-theme-override.entry.cjs.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-ghost-text: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n \n / Input tokens /\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-brand-white, #ffffff);\n --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n --af-input-bg-disabled: var(--af-background-level-1);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--af-typography-body-dark);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--af-typography-body-dark);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-brand-white, #ffffff);\n --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n --af-form-control-bg-disabled: var(--colour-mistgreen-200, #e8ebeb);\n --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n --af-form-control-stroke: var(--colour-mistgreen-500, #d0d6d8);\n --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n --af-form-control-stroke-disabled: var(--colour-mistgreen-500, #d0d6d8);\n --af-form-control-icon: var(--colour-brand-white, #ffffff);\n --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/ ==========================================================================\n INKWELL THEME (Dark)\n ========================================================================== /\n\n.theme-inkwell {\n / Background tokens /\n --af-background-base: var(--colour-brand-inkwell, #14343b);\n --af-background-base-hover: var(--colour-inkwell-600, #102a2f);\n --af-background-contrast: var(--colour-inkwell-700, #102a2f);\n --af-background-level-1: var(--colour-inkwell-450, #203e45);\n --af-background-level-1-hover: var(--colour-inkwell-400, #2b484f);\n --af-background-border-subtle: var(--colour-inkwell-450, #203e45);\n --af-background-border-default: var(--colour-inkwell-400, #2b484f);\n --af-background-border-heavy: var(--colour-inkwell-700, #102a2f);\n --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n --af-background-icon-default: var(--colour-brand-white, #ffffff);\n --af-background-icon-accent: var(--colour-brand-ice, #a6fffb);\n \n / Typography tokens /\n --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);\n --af-typography-body-dark: var(--colour-brand-white, #ffffff);\n --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);\n \n / Button - Primary /\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n / Button - Secondary /\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-icon: var(--colour-brand-white, #ffffff);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n \n / Button - Tertiary /\n --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n --af-button-ghost-stroke: var(--colour-brand-ice, #A6FFFB);\n \n / Input tokens /\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-inkwell-450, #203e45);\n --af-input-bg-hover: var(--colour-inkwell-400, #2b484f);\n --af-input-bg-disabled: var(--colour-inkwell-600, #102a2f);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--colour-brand-ice, #a6fffb);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--colour-brand-ice, #a6fffb);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/ ==========================================================================\n MIST-GREEN THEME\n ========================================================================== /\n\n.theme-mist-green {\n / Background tokens /\n --af-background-base: var(--colour-brand-mist-green, #c6d5d1);\n --af-background-base-hover: var(--colour-mistgreen-600, #b2c0bc);\n --af-background-contrast: var(--colour-brand-soft-clay, #b09670);\n --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n --af-background-level-1-hover: var(--colour-mistgreen-400, #d1ddda);\n --af-background-border-subtle: var(--colour-mistgreen-600, #b2c0bc);\n --af-background-border-default: var(--colour-mistgreen-700, #9eaaa7);\n --af-background-border-heavy: var(--colour-mistgreen-700, #9eaaa7);\n --af-background-border-active: var(--colour-softclay-800, #8a7049);\n --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n \n / Typography tokens /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n \n / Button - Primary /\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n / Button - Secondary /\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n \n / Button - Tertiary /\n --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n \n / Input tokens /\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-brand-white, #ffffff);\n --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n --af-input-bg-disabled: var(--af-background-level-1);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--af-typography-body-dark);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--af-typography-body-dark);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-brand-white, #ffffff);\n --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n --af-form-control-bg-disabled: var(--colour-mistgreen-300, #dde6e3);\n --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n --af-form-control-stroke: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n --af-form-control-stroke-disabled: var(--colour-mistgreen-600, #b2c0bc);\n --af-form-control-icon: var(--colour-brand-white, #ffffff);\n --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/ ==========================================================================\n SOFT-CLAY THEME\n ========================================================================== /\n\n.theme-soft-clay {\n / Background tokens /\n --af-background-base: var(--colour-softclay-400, #c0ab8d);\n --af-background-base-hover: var(--colour-softclay-500, #b09670);\n --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n --af-background-level-1: var(--colour-softclay-500, #b09670);\n --af-background-level-1-hover: var(--colour-softclay-600, #9e8765);\n --af-background-border-subtle: var(--colour-softclay-600, #9e8765);\n --af-background-border-default: var(--colour-softclay-700, #8d785a);\n --af-background-border-heavy: var(--colour-brand-inkwell, #14343b);\n --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n --af-background-icon-accent: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography tokens /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n \n / Button - Primary /\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n / Button - Secondary /\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n \n / Button - Tertiary /\n --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-stroke: var(--colour-brand-inkwell, #14343b);\n \n / Input tokens /\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-brand-white, #ffffff);\n --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n --af-input-bg-disabled: var(--af-background-level-1);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--af-typography-body-dark);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--af-typography-body-dark);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-brand-white, #ffffff);\n --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n --af-form-control-bg-disabled: var(--colour-softclay-300, #d0c1a8);\n --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n --af-form-control-stroke: var(--colour-softclay-700, #8d785a);\n --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n --af-form-control-stroke-disabled: var(--colour-softclay-600, #9e8765);\n --af-form-control-icon: var(--colour-brand-white, #ffffff);\n --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/ ==========================================================================\n WHITE-IVORY THEME\n ========================================================================== /\n\n.theme-white-ivory {\n / Background tokens /\n --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);\n --af-background-base-hover: var(--colour-ivory-100, #fff5e0);\n --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);\n --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);\n --af-background-border-default: var(--colour-ivory-400, #ffe3a3);\n --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);\n --af-background-border-active: var(--colour-brand-soft-clay, #b09670);\n --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n \n / Typography tokens /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n \n / Button - Primary /\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n / Button - Secondary /\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n \n / Button - Tertiary /\n --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-stroke: var(--colour-brand-soft-clay, #b09670);\n \n / Input tokens /\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-brand-white, #ffffff);\n --af-input-bg-hover: var(--colour-ivory-100, #fff5e0);\n --af-input-bg-disabled: var(--af-background-level-1);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--af-typography-body-dark);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--af-typography-body-dark);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-brand-white, #ffffff);\n --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n --af-form-control-bg-disabled: var(--colour-ivory-200, #ffefcc);\n --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n --af-form-control-stroke: var(--colour-ivory-400, #ffe3a3);\n --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n --af-form-control-stroke-disabled: var(--colour-ivory-300, #ffe9b8);\n --af-form-control-icon: var(--colour-brand-white, #ffffff);\n --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n","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":["h","Host"],"mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,8gfAA8gf;;MCkB5hf,eAAe,GAAA,MAAA;AAN5B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;AAW1F;IATC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,KAAK,EAAE,EAAA,EAC9CA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

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

@@ -2,7 +2,7 @@
 var index = require('./index-n-fnurTP.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-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 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-regular, 400);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:normal}.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:normal}.heading.heading-color-primary{color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B))}.heading.heading-color-secondary{color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670))}.description.description-color-default{color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F))}.description.description-color-secondary{color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670))}.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) {
@@ -24,6 +24,21 @@ const AfTypographyLockup = class {
          * Button layout direction (horizontal or vertical stacking)
          */
         this.buttonLayout = 'vertical';
+        /**
+         * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs
+         * `h1.secondary`, where "secondary" renders in the theme's accent/heading-
+         * secondary colour (soft-clay on most themes).
+         * - `primary` (default) - uses `--af-typography-heading-primary`
+         * - `secondary` - uses `--af-typography-heading-secondary`
+         */
+        this.headingColor = 'primary';
+        /**
+         * Description colour variant. Same pattern as `headingColor`; useful for
+         * hero-style lockups where the description is rendered in the accent colour.
+         * - `default` (default) - uses `--af-typography-body-default`
+         * - `secondary` - uses `--af-typography-heading-secondary`
+         */
+        this.descriptionColor = 'default';
     }
     render() {
         const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;
@@ -38,18 +53,20 @@ const AfTypographyLockup = class {
         };
         const headingClasses = {
             'heading': true,
-            [`align-${effectiveHeadingAlignment}`]: true
+            [`align-${effectiveHeadingAlignment}`]: true,
+            [`heading-color-${this.headingColor}`]: true
         };
         const descriptionClasses = {
             'description': true,
-            [`align-${effectiveDescriptionAlignment}`]: true
+            [`align-${effectiveDescriptionAlignment}`]: true,
+            [`description-color-${this.descriptionColor}`]: true
         };
         const buttonsClasses = {
             'buttons': true,
             [`align-${effectiveButtonsAlignment}`]: true
         };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (index.h(index.Host, { key: '8cb507e162ef7a2bca263b7fecb7ef480382e615' }, index.h("div", { key: '94106d59d250a47ca21c15f2e8cb5c1bef7a3936', class: containerClasses }, index.h("div", { key: 'f465704d4f7b1bf77611e32958674a6093813abc', class: "copy", style: copyStyle }, index.h("div", { key: 'd4bcad644d1194c2ecfa593bf9b6a6f185e4a7c2', class: headingClasses, part: "heading" }, index.h("slot", { key: '97558da091bfc3b63cf57ec0816eb3b952cb201a' })), index.h("div", { key: 'c0839f719f0165ecaa296bb0be321a2d8c482e87', class: descriptionClasses, part: "body" }, index.h("slot", { key: '946a5ff890fb09144fee49687fb9de83f45c7aac', name: "description" }))), index.h("div", { key: '6f06d69183d006be1031eb1f73164f10811df9b1', class: buttonsClasses, part: "buttons" }, index.h("slot", { key: '253ba8fada86b55b5516d4dd8732aa19dfeda620', name: "buttons" })))));
+        return (index.h(index.Host, { key: 'e27de1c33a4f7b9e28c1a2045fc858d2b9bd9253' }, index.h("div", { key: '0fc659232e499590465bcafb7d72caa6319ad962', class: containerClasses }, index.h("div", { key: 'c21ef0bbf92217bd988263f0b2e2483ed4e00421', class: "copy", style: copyStyle }, index.h("div", { key: '13f847be028122f4462c44f2ee8dd05b261c93a0', class: headingClasses, part: "heading" }, index.h("slot", { key: '2a9f921c75a2cb4e90ba3c3f10e9444ee74437e9' })), index.h("div", { key: 'aaa6c2bb8d8e186d6d1c05b2a72ee74ed806994a', class: descriptionClasses, part: "body" }, index.h("slot", { key: '435caeb349e749edb1fe02e66614c7f94c8ca1a5', name: "description" }))), index.h("div", { key: '21bf7d348b950564d41e2f3cb6a827463edc1d77', class: buttonsClasses, part: "buttons" }, index.h("slot", { key: 'b92d0e35e21f3f2f7e41e29439388652435c636b', name: "buttons" })))));
     }
 };
 AfTypographyLockup.style = afTypographyLockupCss;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-typography-lockup.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,EAAA,EAChCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS,EAAA,EACxCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM,EAAA,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS,EAAA,EACxCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-typography-lockup.entry.cjs.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 - font-weight 400 (regular) matches Webflow's NeuSans usage /\n.heading {\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\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: normal;\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: normal;\n}\n\n/ Heading colour variants — matches Webflow's h1.primary / h1.secondary pattern /\n.heading.heading-color-primary {\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n}\n\n.heading.heading-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/ Description colour variants /\n.description.description-color-default {\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n}\n\n.description.description-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\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 /\n Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n * secondary colour (soft-clay on most themes).\n * - `primary` (default) - uses `--af-typography-heading-primary`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() headingColor: 'primary' \| 'secondary' = 'primary';\n\n /\n Description colour variant. Same pattern as `headingColor`; useful for\n * hero-style lockups where the description is rendered in the accent colour.\n * - `default` (default) - uses `--af-typography-body-default`\n * - `secondary` - uses `--af-typography-heading-secondary`\n */\n @Prop() descriptionColor: 'default' \| 'secondary' = 'default';\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 [`heading-color-${this.headingColor}`]: true\n };\n\n const descriptionClasses = {\n 'description': true,\n [`align-${effectiveDescriptionAlignment}`]: true,\n [`description-color-${this.descriptionColor}`]: 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":["h","Host"],"mappings":"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"}

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

@@ -26,7 +26,7 @@ const AfVideoContainer = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '8ea21d7dbe736b27b79c0fc7890796f1b1b282aa' }, index.h("div", { key: '92bb0cbf3d58a3304f891109433f965e7fd23816', class: "video-container" }, index.h("div", { key: 'ecec6d6ca2a76e5dd06d3b2e9bc370ac3e41ba00', class: "video-container__top" }, index.h("slot", { key: '2d8243cc440b70409910953186ae6ba36e36d4ca', name: "top" })), index.h("div", { key: '3bbafe7f6cbaa57da83c576f7fa5a17f2d8244a1', class: "video-container__video" }, index.h("af-aspect-ratio", { key: '7f1504a644c406c7f61b5a01707778c104746789', ratio: "16:9" }, index.h("div", { key: 'fe18441bf7e4b46e123d1d18a394336a416cf373', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (index.h("img", { key: 'd624e7c7299f465d8ffde109e5215512126fc60c', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), index.h("button", { key: 'bef98e5cb47e9a9f9849547edd3c8f56baff778e', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, index.h("af-icon", { key: 'e3c6cbb6236d1a60a39e5081ad4285896791cd9d', name: "play", size: 24 }))))), index.h("div", { key: '60ef6d0a51d15b03af7b3ab09d2d8214daedbcab', class: "video-container__bottom" }, index.h("slot", { key: 'fec2c7b7101caf72142fda6a0c1fa281785b08e3', name: "bottom" })))));
+        return (index.h(index.Host, { key: '2957c01ece0612a8475be10e3f4d4dfadd93a983' }, index.h("div", { key: '5d305aaeeca5d29ee53f6623563438c2750cf0bd', class: "video-container" }, index.h("div", { key: '8cec69a4441615cea1358e97186cf4dfda68e53a', class: "video-container__top" }, index.h("slot", { key: '3d4df805bfe1c12a0e7fa7bdb90b1fcf05da8c12', name: "top" })), index.h("div", { key: 'a91bde38acaab8c71b6eb98fae13711d8a83d98c', class: "video-container__video" }, index.h("af-aspect-ratio", { key: '7ecb697869a1bb8e564746d76390259b1066d616', ratio: "16:9" }, index.h("div", { key: 'e6322afbe0dfd1ffc2d1b268fe2d53c289f6cec0', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (index.h("img", { key: '609e1fe39072233e28f850d804a919e2dd6001f4', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), index.h("button", { key: '5a1d1acf6e23f9d2f0257ed7f383490c2870ea52', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, index.h("af-icon", { key: '8d35a930f1248440547b595a57334cc6d1059ea4', name: "play", size: 24 }))))), index.h("div", { key: '00c7f37ebcead64a55a3bf440efd02427668989b', class: "video-container__bottom" }, index.h("slot", { key: 'd897fd3c57f62464b0a9ca6b901cbae51e9f3219', name: "bottom" })))));
     }
 };
 AfVideoContainer.style = afVideoContainerCss;

package/dist/cjs/af-visually-hidden.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const AfVisuallyHidden = class {
         this.focusable = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7c6e072e0ef0882ba20138c59d76a7c3db2851c4', class: { 'focusable': this.focusable } }, index.h("slot", { key: '759af7ecc05e1a715a0be376c350adcf55ce3a04' })));
+        return (index.h(index.Host, { key: 'd6621c547bf297f4d90d1529175bdcf5fa427888', class: { 'focusable': this.focusable } }, index.h("slot", { key: '23ae63d9d6bac054a49e49b7ea280c6b6593defd' })));
     }
 };
 AfVisuallyHidden.style = afVisuallyHiddenCss;