npm - @affinda/wc - Versions diffs - 0.3.1 → 0.4.1 - Mend

@affinda/wc 0.3.1 → 0.4.1

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 (499) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-feature-accordion.entry.cjs.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/\n af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n \n --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n \n The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n \n --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n /\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n / Inherits theme from parent Section via CSS custom properties /\n padding: 0 24px;\n\n / Internal custom properties that inherit from parent Section's theme /\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/ Accordion List /\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/ Accordion Item /\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/ Collapsed items have lighter text /\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/ Timer track - the progress bar at the bottom of expanded items /\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/ Image Container - stretches full height to align with accordion /\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n / Flows from parent Section's theme; mist-green fallback for unthemed use /\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ Tablet /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/ Mobile /\n/ mobile-only /\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/\n Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * Must be wrapped in a Section component to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n /\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /* Section heading /\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /* JSON string of accordion items /\n @Prop() items: string = '[]';\n\n /* Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) /\n @Prop() cycleInterval: number = 6000;\n\n /* Whether auto-cycling is enabled /\n @Prop() autoCycle: boolean = true;\n\n /* Currently expanded item index /\n @State() expandedIndex: number = 0;\n\n /* Progress of current timer (0-100) /\n @State() timerProgress: number = 100;\n\n private progressTimer: number \| null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion /}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button \n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n <span class=\"accordion-item__icon\">\n {this.expandedIndex === index ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n )}\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/ Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt \|\| currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host","index"],"mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,s+HAAs+H;;MC8Bv/H,kBAAkB,GAAA,MAAA;AAN/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAO,CAAA,OAAA,GAAW,+BAA+B;;AAGjD,QAAA,IAAK,CAAA,KAAA,GAAW,IAAI;;AAGpB,QAAA,IAAa,CAAA,aAAA,GAAW,IAAI;;AAG5B,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;AAGxB,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;;AAGzB,QAAA,IAAa,CAAA,aAAA,GAAW,GAAG;AAE5B,QAAA,IAAa,CAAA,aAAA,GAAkB,IAAI;AACnC,QAAA,IAAiB,CAAA,iBAAA,GAAW,CAAC;AA8JtC;IA5JC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,YAAY,EAAE;;;IAIvB,oBAAoB,GAAA;QAClB,IAAI,CAAC,WAAW,EAAE;;AAIpB,IAAA,qBAAqB,CAAC,QAAiB,EAAA;QACrC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,YAAY,EAAE;;aACd;YACL,IAAI,CAAC,WAAW,EAAE;;;IAId,QAAQ,GAAA;AACd,QAAA,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAC7B,QAAA,MAAM;AACN,YAAA,OAAO,EAAE;;;IAIL,YAAY,GAAA;QAClB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,EAAE;AACnC,QAAA,IAAI,CAAC,aAAa,GAAG,GAAG;;QAGxB,MAAM,cAAc,GAAG,MAAK;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,iBAAiB;AACnD,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO;AAE9C,YAAA,IAAI,SAAS,IAAI,CAAC,EAAE;gBAClB,IAAI,CAAC,cAAc,EAAE;;iBAChB;AACL,gBAAA,IAAI,CAAC,aAAa,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,GAAG;AAC3D,gBAAA,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC;;AAE9D,SAAC;AAED,QAAA,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC;;IAGpD,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;AACxC,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;;;IAIrB,cAAc,GAAA;AACpB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE;AAExB,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;;QAE5D,IAAI,CAAC,YAAY,EAAE;;AAGb,IAAA,eAAe,CAAC,KAAa,EAAA;;AAEnC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAE1B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,YAAY,EAAE;;;IAIvB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAE7C,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvCA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAM,EAE1DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EAErCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,IACjC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEE,OAAK,MACrBF,OAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,0BAA0B,EAAE,IAAI,CAAC,aAAa,KAAKE;aACpD,EACD,GAAG,EAAEA,OAAK,EAAA,EAEVF,OAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAACE,OAAK,CAAC,EAAA,eAAA,EAC3B,IAAI,CAAC,aAAa,KAAKA,OAAK,GAAG,MAAM,GAAG,OAAO,EAAA,EAE9DF,OAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAM,EACnDA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sBAAsB,EAAA,EAC/B,IAAI,CAAC,aAAa,KAAKE,OAAK,IAC3BF,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5FA,OAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAE,CAAA,CAC9E,KAENA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5FA,OAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,kBAAkB,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,GAAG,oBAAgB,OAAO,EAAA,CAAE,CACtF,CACP,CACI,CACA,EACTA,OAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAKE,OAAK,GAAG,OAAO,GAAG,GAAG;AACvD,gBAAA,OAAO,EAAE,IAAI,CAAC,aAAa,KAAKA,OAAK,GAAG,GAAG,GAAG;AAC/C,aAAA,EAAA,EAEDF,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,WAAW,CAAK,EAC5D,IAAI,CAAC,aAAa,KAAKE,OAAK,IAAI,IAAI,CAAC,SAAS,KAC7CF,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtCA,OACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,aAAa,GAAG,EAAE,EACrC,CAAA,CACH,CACP,CACG,CACF,CACP,CAAC,CACE,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC7CA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC1C,WAAW,EAAE,QAAQ,KACpBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,WAAW,CAAC,QAAQ,EACzB,GAAG,EAAE,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,KAAK,EAC9C,KAAK,EAAC,0BAA0B,EAAA,CAChC,CACH,EACA,CAAC,WAAW,EAAE,QAAQ,KACrBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sCAAsC,EAAA,EAC/CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACP,CACG,CACF,CACF,CACF,CACF,CACD;;;;;;;;;;;"}
1	+ {"version":3,"file":"af-feature-accordion.entry.cjs.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/\n af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n \n --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n \n The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n \n --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n /\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n / Inherits theme from parent Section via CSS custom properties /\n padding: 0 24px;\n\n / Internal custom properties that inherit from parent Section's theme /\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/ Accordion List /\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/ Accordion Item /\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/ Collapsed items have lighter text /\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n/ Plus → minus morph: vertical bar collapses and the whole icon rotates\n 45° when expanding, giving a single, fluid gesture. /\n.accordion-item__icon-bar {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n transform-origin: 12px 12px;\n}\n\n.accordion-item--expanded .accordion-item__icon-bar--vert {\n transform: scaleY(0);\n opacity: 0;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition:\n max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-item__icon,\n .accordion-item__icon-bar,\n .accordion-item__content,\n .accordion-item__title {\n transition-duration: 0.01ms;\n }\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/ Timer track - the progress bar at the bottom of expanded items /\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/ Image Container - stretches full height to align with accordion /\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n / Flows from parent Section's theme; mist-green fallback for unthemed use /\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ Tablet /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/ Mobile /\n/ mobile-only /\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/\n Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * Must be wrapped in a Section component to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n /\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /* Section heading /\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /* JSON string of accordion items /\n @Prop() items: string = '[]';\n\n /* Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) /\n @Prop() cycleInterval: number = 6000;\n\n /* Whether auto-cycling is enabled /\n @Prop() autoCycle: boolean = true;\n\n /* Currently expanded item index /\n @State() expandedIndex: number = 0;\n\n /* Progress of current timer (0-100) /\n @State() timerProgress: number = 100;\n\n private progressTimer: number \| null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion /}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button\n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n {/ Plus → minus: a single SVG with two strokes, the\n vertical one rotated-out to zero when expanded. This\n gives a fluid morph instead of swapping SVGs mid-\n animation. /}\n <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path class=\"accordion-item__icon-bar\" d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n <path class=\"accordion-item__icon-bar accordion-item__icon-bar--vert\" d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/ Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt \|\| currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host","index"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afFeatureCardCss = ".sc-af-feature-card-h{display:block;--af-card-padding:0;--af-card-gap:0}[card-size=\"default\"].sc-af-feature-card-h{width:544px}[card-size=\"large\"].sc-af-feature-card-h{width:777px}[card-size=\"flexible\"].sc-af-feature-card-h{display:flex;width:100%;height:100%}.feature-card.sc-af-feature-card{overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--border-radius-card-level-1, 32px);width:100%;height:100%;isolation:isolate}.feature-card--layout-full-bleed.sc-af-feature-card{background:var(--background-base, var(--colour-brand-inkwell, #14343b))}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:660px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:480px}.feature-card__background.sc-af-feature-card{position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:0}.feature-card__background-image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}.feature-card__overlay.sc-af-feature-card{position:absolute;bottom:0;left:0;right:0;border-radius:0;backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);z-index:1;padding:124px 32px 32px 32px;--af-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--af-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--af-typography-body-default:var(--typography-body-dark, #ffffff);--colour-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--colour-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--colour-typography-body-default:var(--typography-body-dark, #ffffff)}.feature-card--layout-standard.sc-af-feature-card{background:var(--background-level-1, var(--colour-mistgreen-200, #e8eeed))}.feature-card--layout-standard.sc-af-feature-card af-card.sc-af-feature-card{--border-radius-card-level-1:0}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:400px}.feature-card__content.sc-af-feature-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1;padding:40px 32px 12px 32px;flex:1 1 auto}[card-size=\"large\"].sc-af-feature-card-h .feature-card__content.sc-af-feature-card{padding:40px 40px 0 40px}.feature-card__image-area.sc-af-feature-card{position:relative;width:100%;height:160px;flex-shrink:0;overflow:hidden;border-radius:0}.feature-card__image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:0}.feature-card.sc-af-feature-card af-typography-lockup.sc-af-feature-card{--colour-typography-heading-primary:var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));--colour-typography-body-default:var(--af-typography-body-default, var(--typography-body-default, #2b484f))}@media (max-width: 768px){.feature-card.sc-af-feature-card{border-radius:var(--border-radius-card-level-1, 24px)}[card-size=\"default\"].sc-af-feature-card-h,[card-size=\"large\"].sc-af-feature-card-h{width:335px}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:442px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:340px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:380px}.feature-card__overlay.sc-af-feature-card{padding:80px 24px 28px 24px}.feature-card__content.sc-af-feature-card{padding:32px 24px 12px 24px}.feature-card__image-area.sc-af-feature-card{height:192px}}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afFeatureGridCss = ".sc-af-feature-grid-h{display:block;width:100%}.feature-grid.sc-af-feature-grid{display:flex;flex-direction:column;align-items:center;width:100%}.feature-grid__cards.sc-af-feature-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;width:100%;max-width:1440px;align-items:stretch}.feature-grid__cards.sc-af-feature-grid>af-feature-card.sc-af-feature-grid{height:100%}.feature-grid--cols-3.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(3, 1fr)}.feature-grid--cols-2.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--cols-1.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:1fr}.feature-grid__progress.sc-af-feature-grid{display:none;width:100%;margin-top:16px}@media (max-width: 767px){.feature-grid__cards.sc-af-feature-grid{gap:16px}.feature-grid--mobile-list.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:1fr;gap:20px}.feature-grid--mobile-grid.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid::-webkit-scrollbar{display:none}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid>af-feature-card.sc-af-feature-grid{flex:0 0 280px;scroll-snap-align:start}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__progress.sc-af-feature-grid{display:block}}@media (min-width: 768px) and (max-width: 1023px){.feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--cols-3.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid,.feature-grid--cols-4.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afFieldsetCss = ":host{display:block}.fieldset{display:flex;flex-direction:column;border:none;padding:0;margin:0;min-inline-size:0}.fieldset.disabled{opacity:0.5;pointer-events:none}.legend{display:block;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));padding:0;margin:0 0 12px 0;width:100%}.items{display:flex}.items.orientation-vertical{flex-direction:column;gap:8px;align-items:flex-start}.items.orientation-horizontal{flex-direction:row;flex-wrap:wrap;gap:28px;align-items:center}::slotted(*){flex-shrink:0}.items.orientation-vertical ::slotted(*){width:100%}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afFooterColumnCss = ".sc-af-footer-column-h{display:block}.footer-column.sc-af-footer-column{display:flex;flex-direction:column;gap:16px}.footer-column__heading.sc-af-footer-column{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer-column__list.sc-af-footer-column{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer-column__list.sc-af-footer-column-s>li,.footer-column__list .sc-af-footer-column-s>li{margin:0}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afFooterLinkCss = ".sc-af-footer-link-h{display:contents}li.sc-af-footer-link{margin:0;list-style:none}.footer-link.sc-af-footer-link{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);text-decoration:none;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px}.footer-link.sc-af-footer-link:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1)}.footer-link__external-icon.sc-af-footer-link{opacity:0.7;flex-shrink:0}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afFooterCss = ".sc-af-footer-h{display:block}.footer.sc-af-footer{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-tints-mistGreen-200, #C6D5D1);padding:120px 0 0}.footer__container.sc-af-footer{max-width:1280px;margin:0 auto;padding:0 24px}.footer__top.sc-af-footer{display:grid;grid-template-columns:380px 1fr;gap:48px;padding-bottom:48px}.footer__brand.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__brand-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:32px}.footer__logo.sc-af-footer{margin-bottom:24px}.footer__logo.sc-af-footer svg.sc-af-footer,.footer__logo.sc-af-footer img.sc-af-footer{height:32px;width:auto}.footer__social.sc-af-footer{display:flex;gap:12px}.footer__social-link.sc-af-footer{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.footer__social-link.sc-af-footer:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}.footer__contact-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:24px 32px;display:flex;flex-direction:column;gap:20px}.footer__contact-item.sc-af-footer{display:flex;flex-direction:column;gap:4px}.footer__contact-label.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.footer__contact-value.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}.footer__nav.sc-af-footer{display:flex;flex-direction:column;justify-content:space-between}.footer__nav-columns.sc-af-footer{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px}.footer__nav-column.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__nav-heading.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer__nav-list.sc-af-footer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer__nav-list.sc-af-footer li.sc-af-footer{margin:0}.footer__nav-list.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);text-decoration:none;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px}.footer__nav-list.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1)}.footer__external-icon.sc-af-footer{opacity:0.7;flex-shrink:0}.footer__status.sc-af-footer{display:flex;align-items:center;gap:8px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(198, 213, 209, 0.1)}.footer__status-dot.sc-af-footer{width:10px;height:10px;border-radius:50%;flex-shrink:0}.footer__status-dot--operational.sc-af-footer{background-color:var(--status-ok, #3E8F6E)}.footer__status-dot--issue.sc-af-footer{background-color:var(--status-issue, #B94A3B)}.footer__status-text.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7)}.footer__status-link.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:underline;text-underline-offset:2px;margin-left:8px}.footer__status-link.sc-af-footer:hover{text-decoration:none}.footer__bottom.sc-af-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:24px 0;border-top:1px solid rgba(198, 213, 209, 0.1);background-color:rgba(198, 213, 209, 0.05);margin:0 -24px;padding-left:calc(24px + env(safe-area-inset-left));padding-right:calc(24px + env(safe-area-inset-right));padding-bottom:max(24px, env(safe-area-inset-bottom))}.footer__copyright.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);margin:0}.footer__legal.sc-af-footer{display:flex;gap:24px}.footer__legal.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);text-decoration:underline;text-underline-offset:2px}.footer__legal.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:none}.footer__badges.sc-af-footer{display:flex;gap:16px;align-items:center}.footer__badge.sc-af-footer{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.footer__badge.sc-af-footer svg.sc-af-footer{width:100%;height:100%}@media (max-width: 1024px){.footer__top.sc-af-footer{grid-template-columns:1fr;gap:48px}.footer__brand.sc-af-footer{flex-direction:row;gap:16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{flex:1}}@media (max-width: 768px){.footer.sc-af-footer{padding:48px 0 0}.footer__top.sc-af-footer{gap:32px}.footer__brand.sc-af-footer{flex-direction:column}.footer__nav-columns.sc-af-footer{grid-template-columns:repeat(2, 1fr);gap:32px}.footer__bottom.sc-af-footer{flex-direction:column;align-items:flex-start;gap:16px}.footer__legal.sc-af-footer{flex-wrap:wrap;gap:16px}}@media (max-width: 480px){.footer__container.sc-af-footer{padding:0 16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{padding:24px}.footer__nav-columns.sc-af-footer{grid-template-columns:1fr;gap:24px}.footer__bottom.sc-af-footer{margin:0 -16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}.footer__badges.sc-af-footer{width:100%;justify-content:flex-start}}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afGridCalloutCss = ".sc-af-grid-callout-h{display:block;width:100%}.grid-callout.sc-af-grid-callout{display:flex;width:100%;gap:40px;align-items:stretch}.grid-callout__image-container.sc-af-grid-callout{flex:0 0 auto;width:45%;min-height:400px;position:relative;overflow:hidden}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0 4000px 4000px 0;margin-left:calc(-1 * var(--container-padding, 80px))}.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:4000px 0 0 4000px;margin-right:calc(-1 * var(--container-padding, 80px))}.grid-callout__image.sc-af-grid-callout{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.grid-callout__content.sc-af-grid-callout{flex:1;display:flex;flex-direction:column;gap:48px;padding:40px 0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:40px}.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-right:40px}.grid-callout--no-image.sc-af-grid-callout{flex-direction:column}.grid-callout--no-image.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding:0}.grid-callout__heading.sc-af-grid-callout{max-width:840px}.grid-callout__items.sc-af-grid-callout{display:grid;gap:40px;width:100%}.grid-callout__items--cols-2.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items--cols-3.sc-af-grid-callout{grid-template-columns:repeat(3, 1fr)}.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(4, 1fr)}.grid-callout__cta.sc-af-grid-callout{display:flex;gap:12px;flex-wrap:wrap}.grid-callout__cta.sc-af-grid-callout:empty{display:none}@media (max-width: 1024px){.grid-callout.sc-af-grid-callout{gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:40%}.grid-callout__content.sc-af-grid-callout{gap:40px}.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items.sc-af-grid-callout{gap:32px}}@media (max-width: 768px){.grid-callout.sc-af-grid-callout{flex-direction:column;gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:calc(100% + 2 * var(--container-padding, 20px));min-height:280px;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px));border-radius:0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px))}.grid-callout__content.sc-af-grid-callout{padding:0;gap:32px}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:0;padding-right:0}.grid-callout__items.sc-af-grid-callout{grid-template-columns:1fr;gap:32px}.grid-callout__items--cols-2.sc-af-grid-callout,.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:1fr}}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afGridCss = ":host{display:block;box-sizing:border-box}:host([hidden]){display:none}.grid{display:grid;grid-template-columns:repeat(var(--grid-columns), 1fr);gap:var(--grid-gap);align-items:var(--grid-align)}@media (max-width: 1024px){.grid{grid-template-columns:repeat(var(--grid-columns-lg), 1fr)}}@media (max-width: 768px){.grid{grid-template-columns:repeat(var(--grid-columns-md), 1fr)}}@media (max-width: 480px){.grid{grid-template-columns:repeat(var(--grid-columns-sm), 1fr)}}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));letter-spacing:var(--letter-spacing-heading, -0.02em)}.align-inherit{text-align:var(--af-text-align, left)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:var(--font-size-heading-xl-fluid, clamp(50px, 3.31vw + 37.57px, 80px));line-height:var(--line-height-heading-tight, 1)}.level-1{font-size:var(--font-size-heading-1-fluid, clamp(38px, 1.99vw + 30.54px, 56px));line-height:var(--line-height-heading-tight, 1)}.level-2{font-size:var(--font-size-heading-2-fluid, clamp(32px, 1.33vw + 27.03px, 44px));line-height:var(--line-height-heading-tight, 1)}.level-3{font-size:var(--font-size-heading-3-fluid, clamp(25px, 0.99vw + 21.27px, 34px));line-height:var(--line-height-heading-tight, 1)}.level-4{font-size:var(--font-size-heading-4-fluid, clamp(20px, 0.44vw + 18.34px, 24px));line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-4{line-height:var(--line-height-heading-relaxed, 1.2)}}.level-5{font-size:var(--font-size-heading-5-fluid, clamp(18px, 0.22vw + 17.17px, 20px));line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-5{line-height:var(--line-height-heading-relaxed, 1.2)}}";

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
-const afHeroCss = ".sc-af-hero-h{display:block;position:relative;width:100%;--af-hero-image-lift:-260px;--af-hero-image-min-height:360px}.hero__section.sc-af-hero{position:relative;overflow:hidden}.hero__paperclip.sc-af-hero{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none;z-index:0;width:655px;height:754px}@media (max-width: 991px){.hero__paperclip.sc-af-hero{width:480px;height:552px}}@media (max-width: 767px){.hero__paperclip.sc-af-hero{display:none}}.hero__inner.sc-af-hero{position:relative;z-index:1;padding-bottom:40px}.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:124px}.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:164px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:80px}.hero__grid.sc-af-hero{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr auto;gap:48px}.hero__copy.sc-af-hero{padding-left:16px}.hero--inkwell-photo.hero--pad-loose.sc-af-hero-h .hero__copy.sc-af-hero{padding-bottom:120px}.hero--inkwell-centered.sc-af-hero-h .hero__copy.sc-af-hero{padding-left:0;text-align:center}.hero__badge.sc-af-hero:not(:has(*)){display:none}.hero__badge.sc-af-hero:has(*){margin-bottom:16px}.hero__copy.sc-af-hero-s>[slot='badge'],.hero__copy .sc-af-hero-s>[slot='badge']{display:inline-block}.hero__buttons.sc-af-hero{margin-top:32px}.hero__buttons.sc-af-hero:empty{display:none}.hero--inkwell-centered.sc-af-hero-h .hero__buttons.sc-af-hero{display:flex;justify-content:center}.sc-af-hero-h{--af-hero-blob-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');--af-hero-blob-mask-mobile:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>')}.hero__image.sc-af-hero{min-height:var(--af-hero-image-min-height);overflow:visible;margin-top:var(--af-hero-image-lift);position:relative;z-index:1}.hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero__image--masked.sc-af-hero-s>picture img,.hero__image--masked .sc-af-hero-s>picture img,.hero__image--masked.sc-af-hero-s>.af-hero-image,.hero__image--masked .sc-af-hero-s>.af-hero-image{display:block;width:100%;height:auto;-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__illustration.sc-af-hero{flex:0 0 auto;width:100%;max-width:432px;line-height:0;justify-self:end}.hero__illustration.sc-af-hero-s>svg,.hero__illustration .sc-af-hero-s>svg,.hero__illustration.sc-af-hero-s>img,.hero__illustration .sc-af-hero-s>img{width:100%;height:auto;display:block;border-radius:16px}.hero--inkwell-illustration.sc-af-hero-h .hero__illustration.sc-af-hero{max-width:none}.hero__logos.sc-af-hero{position:relative;z-index:2}.hero__logos.sc-af-hero:not(:has(*)){display:none}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:-240px;padding-top:48px;padding-bottom:48px;background:var(--af-background-base, var(--colour-brand-inkwell, #14343b));border-top:1px solid\n    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45))}@media (max-width: 991px){.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero,.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:112px}.hero__grid.sc-af-hero{grid-template-columns:1fr;gap:32px}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr}.hero__copy.sc-af-hero{padding-left:0;padding-bottom:0}.hero__illustration.sc-af-hero{max-width:360px;margin-inline:auto;justify-self:center}.hero__image.sc-af-hero{margin-top:0;min-height:auto}.sc-af-hero-h.hero--inkwell-photo .hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero--inkwell-photo.sc-af-hero-h .hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask-mobile);mask-image:var(--af-hero-blob-mask-mobile)}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:24px;padding-top:32px;padding-bottom:32px;background:transparent;border-top:none}}";
+const afHeroCss = ".sc-af-hero-h{display:block;position:relative;width:100%;--af-hero-image-lift:-260px;--af-hero-image-min-height:360px}.hero__section.sc-af-hero{position:relative;overflow:hidden}.hero__paperclip.sc-af-hero{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none;z-index:0;width:655px;height:754px}@media (max-width: 991px){.hero__paperclip.sc-af-hero{width:480px;height:552px}}@media (max-width: 767px){.hero__paperclip.sc-af-hero{display:none}}.hero__inner.sc-af-hero{position:relative;z-index:1;padding-bottom:40px}.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:124px}.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:164px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:180px}.hero__grid.sc-af-hero{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr auto;gap:48px}.hero--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr 1fr}.hero__copy.sc-af-hero{padding-left:16px}.hero--inkwell-photo.hero--pad-loose.sc-af-hero-h .hero__copy.sc-af-hero{padding-bottom:120px}.hero--inkwell-centered.sc-af-hero-h .hero__copy.sc-af-hero{padding-left:0;text-align:center}.hero__badge.sc-af-hero:not(:has(*)){display:none}.hero__badge.sc-af-hero:has(*){margin-bottom:16px}.hero__copy.sc-af-hero-s>[slot='badge'],.hero__copy .sc-af-hero-s>[slot='badge']{display:inline-block}.hero__buttons.sc-af-hero{margin-top:32px}.hero__buttons.sc-af-hero:empty{display:none}.hero--inkwell-centered.sc-af-hero-h .hero__buttons.sc-af-hero{display:flex;justify-content:center}.sc-af-hero-h{--af-hero-blob-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');--af-hero-blob-mask-mobile:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>')}.hero__image.sc-af-hero{min-height:var(--af-hero-image-min-height);overflow:visible;margin-top:var(--af-hero-image-lift);position:relative;z-index:1}.hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero__image--masked.sc-af-hero-s>picture img,.hero__image--masked .sc-af-hero-s>picture img,.hero__image--masked.sc-af-hero-s>.af-hero-image,.hero__image--masked .sc-af-hero-s>.af-hero-image{display:block;width:100%;height:auto;-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__illustration.sc-af-hero{flex:0 0 auto;width:100%;max-width:432px;line-height:0;justify-self:end}.hero__illustration.sc-af-hero-s>svg,.hero__illustration .sc-af-hero-s>svg,.hero__illustration.sc-af-hero-s>img,.hero__illustration .sc-af-hero-s>img{width:100%;height:auto;display:block;border-radius:16px}.hero--inkwell-illustration.sc-af-hero-h .hero__illustration.sc-af-hero{max-width:540px}.hero__logos.sc-af-hero{position:relative;z-index:2}.hero__logos.sc-af-hero:not(:has(*)){display:none}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:-240px;padding-top:48px;padding-bottom:48px;background:var(--af-background-base, var(--colour-brand-inkwell, #14343b));border-top:1px solid\n    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45))}@media (max-width: 991px){.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero,.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:112px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:144px}.hero__grid.sc-af-hero{grid-template-columns:1fr;gap:32px}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr}.hero__copy.sc-af-hero{padding-left:0;padding-bottom:0}.hero__illustration.sc-af-hero{max-width:360px;margin-inline:auto;justify-self:center}.hero__image.sc-af-hero{margin-top:0;min-height:auto}.sc-af-hero-h.hero--inkwell-photo .hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero--inkwell-photo.sc-af-hero-h .hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask-mobile);mask-image:var(--af-hero-blob-mask-mobile)}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:24px;padding-top:32px;padding-bottom:32px;background:transparent;border-top:none}}";
 /**
  * Map each variant to its underlying section theme token. Keeps one source

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afIconBoxCss = ".sc-af-icon-box-h{display:inline-block}.icon-box.sc-af-icon-box{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background-color:var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));color:var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));flex-shrink:0}.icon-box--size-small.sc-af-icon-box{width:48px;height:48px;padding:14px;border-radius:12px}.icon-box--size-default.sc-af-icon-box{width:64px;height:64px;padding:12px;border-radius:16px}.icon-box--size-large.sc-af-icon-box{width:80px;height:80px;padding:16px;border-radius:20px}";

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

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

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afIconTextCss = ".sc-af-icon-text-h{display:block}.icon-text.sc-af-icon-text{display:flex;width:100%}.icon-text--vertical.sc-af-icon-text{flex-direction:column;gap:24px;align-items:flex-start}.icon-text--horizontal.sc-af-icon-text{flex-direction:row;gap:20px;align-items:flex-start}.icon-text__icon.sc-af-icon-text{flex-shrink:0}.icon-text__lockup.sc-af-icon-text{flex:1;min-width:0}@media (max-width: 768px){.icon-text--vertical.sc-af-icon-text{gap:20px}.icon-text--horizontal.sc-af-icon-text{gap:16px}}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /**

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afIllustratedCardCss = ".sc-af-illustrated-card-h{display:flex;flex-direction:column;width:100%;--af-card-padding:0;--af-card-gap:0}.illustrated-card.sc-af-illustrated-card{min-height:400px}.illustrated-card__content.sc-af-illustrated-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1}.illustrated-card--breakpoint-desktop.illustrated-card--size-default.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 32px 12px 32px}.illustrated-card--breakpoint-desktop.illustrated-card--size-large.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 40px 0 40px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:32px 24px 12px 24px}.illustrated-card__illustration-area.sc-af-illustrated-card{position:relative;width:100%;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.illustrated-card--breakpoint-desktop.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:160px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:192px}.illustrated-card__illustration-placeholder.sc-af-illustrated-card{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center}.illustrated-card__illustration-area.sc-af-illustrated-card-s>img,.illustrated-card__illustration-area .sc-af-illustrated-card-s>img,.illustrated-card__illustration-area.sc-af-illustrated-card img.sc-af-illustrated-card{max-width:100%;max-height:200px;height:auto;object-fit:contain;border-radius:var(--radius-lg, 20px)}.illustrated-card.sc-af-illustrated-card af-typography-lockup.sc-af-illustrated-card{--colour-typography-heading-primary:var(--af-typography-heading-primary);--colour-typography-body-default:var(--af-typography-body-default)}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afImageCss = ".sc-af-image-h{display:block;width:100%}.image-container.sc-af-image{position:relative;overflow:hidden}.image-container--rounded.sc-af-image{border-radius:var(--radius-md, 12px)}.image-container--rounded-left.sc-af-image{border-top-left-radius:var(--radius-md, 12px);border-bottom-left-radius:var(--radius-md, 12px)}.image-container--rounded-right.sc-af-image{border-top-right-radius:var(--radius-md, 12px);border-bottom-right-radius:var(--radius-md, 12px)}.image-container--square.sc-af-image{border-radius:0}.image.sc-af-image{display:block;width:100%;height:auto;object-fit:cover}.image-border.sc-af-image{position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));pointer-events:none;border-radius:inherit}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radius-lg, 20px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:288px;height:288px;max-width:288px;max-height:288px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:38px;padding-bottom:38px;padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:normal}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:normal}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:normal}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:24px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radius-lg, 20px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afInlineCss = ":host{display:inline-flex;box-sizing:border-box}:host([hidden]){display:none}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afInputCss = ":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.input-container{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;min-height:48px;box-sizing:border-box}.input-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.input-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.input-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.input-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.search-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-icon, var(--af-background-icon-default, #14343b))}.search-icon svg{width:20px;height:20px}.disabled .search-icon{opacity:0.5}.input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none}.input::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.input:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input[type=\"search\"]::-webkit-search-decoration,.input[type=\"search\"]::-webkit-search-cancel-button,.input[type=\"search\"]::-webkit-search-results-button,.input[type=\"search\"]::-webkit-search-results-decoration{display:none}.input[type=\"number\"]::-webkit-inner-spin-button,.input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=\"number\"]{-moz-appearance:textfield}.clear-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0;opacity:0.6;transition:opacity 0.15s ease}.clear-button svg{width:16px;height:16px}.clear-button:hover{opacity:1}.clear-button:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
 const afLogoWellCss = ":host{display:inline-block}.logo-well{background:var(--af-carousel-logo-well-bg, var(--colour-background-level1-dark, #203e45));border-radius:var(--radius-logo-well-desktop, 16px);height:72px;width:184px;display:flex;align-items:center;justify-content:center;padding:20px 32px;box-sizing:border-box}::slotted(img){max-height:32px;max-width:120px;width:auto;height:auto;display:block;object-fit:contain;filter:var(--af-carousel-logo-filter, brightness(0) invert(1))}::slotted(svg){max-height:32px;max-width:120px;width:auto;height:auto;display:block;color:var(--af-carousel-logo-color, white)}::slotted(div){white-space:nowrap;color:var(--af-carousel-logo-color, white);font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:600;font-size:16px}@media (max-width: 767px){.logo-well{border-radius:var(--radius-logo-well-mobile, 12px);padding:20px 24px}}";

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-BzZA0USq.js');
+var index = require('./index-3161MbMQ.js');
-const afNavAccordionItemCss = ".sc-af-nav-accordion-item-h{display:block;width:100%}.nav-accordion-item.sc-af-nav-accordion-item{width:100%}.trigger.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:20px 12px;background:transparent;border:none;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));cursor:pointer;font:inherit;text-align:left;text-decoration:none;color:inherit;box-sizing:border-box}a.trigger.sc-af-nav-accordion-item{color:inherit}.trigger.sc-af-nav-accordion-item:hover:not(:disabled){background-color:rgba(20, 52, 59, 0.02)}.trigger.sc-af-nav-accordion-item:focus-visible{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:-2px}.trigger.sc-af-nav-accordion-item:disabled{cursor:not-allowed;opacity:0.5}.trigger-content.sc-af-nav-accordion-item{flex:1;min-width:0;display:flex;align-items:center;min-height:24px}.label.sc-af-nav-accordion-item{font-family:var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--typography-headingweight, 500);font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.chevron.sc-af-nav-accordion-item,.chevron-button.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));transition:transform 0.3s ease}.chevron-button.sc-af-nav-accordion-item{background:transparent;border:none;cursor:pointer;padding:0}.chevron-button.sc-af-nav-accordion-item:hover{opacity:0.7}.chevron.is-open.sc-af-nav-accordion-item{transform:rotate(180deg)}.content-wrapper.sc-af-nav-accordion-item{overflow:hidden;transition:max-height 0.3s ease}.content.sc-af-nav-accordion-item{padding:0;background:var(--af-background-base, white)}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{cursor:not-allowed;opacity:0.5}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item:hover{background-color:transparent}.is-open.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{border-bottom-color:transparent}.breakpoint-mobile.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:20px 12px}.breakpoint-mobile.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.breakpoint-desktop.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:12px}.breakpoint-desktop.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:16px;line-height:20px;letter-spacing:0}.breakpoint-mobile.sc-af-nav-accordion-item-h .content.sc-af-nav-accordion-item{padding-left:0}";
+const afNavAccordionItemCss = ".sc-af-nav-accordion-item-h{display:block;width:100%}.nav-accordion-item.sc-af-nav-accordion-item{width:100%}.trigger.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:20px 12px;background:transparent;border:none;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));cursor:pointer;font:inherit;text-align:left;text-decoration:none;color:inherit;box-sizing:border-box}a.trigger.sc-af-nav-accordion-item{color:inherit}.trigger.sc-af-nav-accordion-item:hover:not(:disabled){background-color:rgba(20, 52, 59, 0.02)}.trigger.sc-af-nav-accordion-item:focus-visible{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:-2px}.trigger.sc-af-nav-accordion-item:disabled{cursor:not-allowed;opacity:0.5}.trigger-content.sc-af-nav-accordion-item{flex:1;min-width:0;display:flex;align-items:center;min-height:24px}.label.sc-af-nav-accordion-item{font-family:var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--typography-headingweight, 500);font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.chevron.sc-af-nav-accordion-item,.chevron-button.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));transition:transform var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.chevron-button.sc-af-nav-accordion-item{background:transparent;border:none;cursor:pointer;padding:0}.chevron-button.sc-af-nav-accordion-item:hover{opacity:0.7}.chevron.is-open.sc-af-nav-accordion-item{transform:rotate(180deg)}.content-wrapper.sc-af-nav-accordion-item{overflow:hidden;transition:max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1))}@media (prefers-reduced-motion: reduce){.chevron.sc-af-nav-accordion-item,.chevron-button.sc-af-nav-accordion-item,.content-wrapper.sc-af-nav-accordion-item{transition-duration:0.01ms}}.content.sc-af-nav-accordion-item{padding:0;background:var(--af-background-base, white)}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{cursor:not-allowed;opacity:0.5}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item:hover{background-color:transparent}.is-open.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{border-bottom-color:transparent}.breakpoint-mobile.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:20px 12px}.breakpoint-mobile.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.breakpoint-desktop.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:12px}.breakpoint-desktop.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:16px;line-height:20px;letter-spacing:0}.breakpoint-mobile.sc-af-nav-accordion-item-h .content.sc-af-nav-accordion-item{padding-left:0}";
 const AfNavAccordionItem = class {
     constructor(hostRef) {