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

@affinda/wc 0.0.15 → 0.0.17

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

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-DfEVhbS6.js');
+var index = require('./index-ybEiHT0b.js');
-const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{background-color:var(--colour-background-level1, #E8EFED);padding:80px 0}.feature-accordion__container.sc-af-feature-accordion{max-width:1280px;margin:0 auto;padding:0 40px}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--colour-brand-inkwell, #14343B);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid rgba(20, 52, 59, 0.12)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid rgba(20, 52, 59, 0.12)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--colour-brand-inkwell, #14343B)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--colour-brand-inkwell, #14343B);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{color:rgba(20, 52, 59, 0.7)}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--colour-brand-inkwell, #14343B);transition:transform 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{color:rgba(20, 52, 59, 0.5)}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:rgba(20, 52, 59, 0.85);margin:0 0 20px 0;padding-right:40px}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:rgba(20, 52, 59, 0.1);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--colour-brand-teal, #00B5AD);border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:#B8C9C5;border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:32px}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion.sc-af-feature-accordion{padding:60px 0}.feature-accordion__container.sc-af-feature-accordion{padding:0 24px}.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion.sc-af-feature-accordion{padding:48px 0}.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";
+const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{padding:0 24px;--_heading-color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));--_body-color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));--_border-color:var(--af-background-border-default, rgba(20, 52, 59, 0.12));--_level-1-bg:var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3))}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--_heading-color);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid var(--_border-color)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid var(--_border-color)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--_heading-color)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--_heading-color);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{opacity:0.7}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--_heading-color);transition:transform 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{opacity:0.5}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:var(--_body-color);margin:0 0 20px 0;padding-right:40px;opacity:0.85}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:var(--_border-color);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--colour-brand-ice, #a6fffb);border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:var(--_level-1-bg);border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:32px}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";
 const AfFeatureAccordion = class {
     constructor(hostRef) {
@@ -89,13 +89,13 @@ const AfFeatureAccordion = class {
     render() {
         const items = this.getItems();
         const currentItem = items[this.expandedIndex];
-        return (index.h(index.Host, { key: 'aa44ec62bc38804560dc42a04c2716cdc64e405e' }, index.h("div", { key: 'a1501fda9da01a893a99e155edf0eb59dc1eca93', class: "feature-accordion" }, index.h("div", { key: '17485346b1e80bc08bdcb6a2bcc04e9866421dee', class: "feature-accordion__container" }, index.h("h2", { key: '2943cd58657e62eb90c91543ee0e210644eb035e', class: "feature-accordion__heading" }, this.heading), index.h("div", { key: 'f4491b7072d36a032b742262dd0e699ae7836e52', class: "feature-accordion__content" }, index.h("div", { key: '553cec48f7a089d56522231f29c931f2e3e861c2', class: "feature-accordion__list" }, items.map((item, index$1) => (index.h("div", { class: {
+        return (index.h(index.Host, { key: '8285d5116d64b9f02d758fa8e0ecb8c4129636d0' }, index.h("div", { key: '53894f00e6ba9a9900fa63fe199e4448d21e8886', class: "feature-accordion" }, index.h("div", { key: 'e50c879453d39367bd88e02cc5756a59292b7b71', class: "feature-accordion__container" }, index.h("h2", { key: 'd2c797f6d1feddafd01b2b933e73e3d71063ae1d', class: "feature-accordion__heading" }, this.heading), index.h("div", { key: '48ba662a3cd7ab981fd947c4063f81e6ef94773f', class: "feature-accordion__content" }, index.h("div", { key: '05b190936f6c4a9e849de1b724a577dbf33aba12', class: "feature-accordion__list" }, items.map((item, index$1) => (index.h("div", { class: {
                 'accordion-item': true,
                 'accordion-item--expanded': this.expandedIndex === index$1
             }, key: index$1 }, index.h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index$1), "aria-expanded": this.expandedIndex === index$1 ? 'true' : 'false' }, index.h("h4", { class: "accordion-item__title" }, item.title), index.h("span", { class: "accordion-item__icon" }, this.expandedIndex === index$1 ? (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))) : (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))), index.h("div", { class: "accordion-item__content", style: {
                 maxHeight: this.expandedIndex === index$1 ? '200px' : '0',
                 opacity: this.expandedIndex === index$1 ? '1' : '0'
-            } }, index.h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index$1 && this.autoCycle && (index.h("div", { class: "accordion-item__timer-track" }, index.h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), index.h("div", { key: '6f138ad4516c470f4772e36b6cae5c4b55aea44e', class: "feature-accordion__image-container" }, index.h("div", { key: 'e0ddfa8fe67626d3d35fd00b4d18df5276a3ef47', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (index.h("img", { key: 'b0979552365a6dc833b4e9f82093896d4f9c60d4', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (index.h("div", { key: '9bfe132fc469c3d582b13fc0869bdbc3bf4617f8', class: "feature-accordion__image-placeholder" }, index.h("slot", { key: 'c7b885939fee402ffb093376fa344f3c2b31997a', name: "image" }))))))))));
+            } }, index.h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index$1 && this.autoCycle && (index.h("div", { class: "accordion-item__timer-track" }, index.h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), index.h("div", { key: '34a3497894ab6aa63acafa62cc8a7029848731e8', class: "feature-accordion__image-container" }, index.h("div", { key: '3a60c7ffb55e49194d2d3dfb9a324382f1bd2e6a', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (index.h("img", { key: '1120770253d6442130baea4e74deae1694a36bf7', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (index.h("div", { key: '50a4b4201d0141f018d7e9ce2e03e2cfc090e2fc', class: "feature-accordion__image-placeholder" }, index.h("slot", { key: '2d029a56bc680d3f40be5c18841a5477de9c3862', name: "image" }))))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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":[":host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n background-color: var(--colour-background-level1, #E8EFED);\n padding: 80px 0;\n}\n\n.feature-accordion__container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 0 40px;\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(--colour-brand-inkwell, #14343B);\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 rgba(20, 52, 59, 0.12);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid rgba(20, 52, 59, 0.12);\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(--colour-brand-inkwell, #14343B);\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(--colour-brand-inkwell, #14343B);\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 color: rgba(20, 52, 59, 0.7);\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--colour-brand-inkwell, #14343B);\n transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n color: rgba(20, 52, 59, 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: rgba(20, 52, 59, 0.85);\n margin: 0 0 20px 0;\n padding-right: 40px;\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: rgba(20, 52, 59, 0.1);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n / Right-align the progress bar so it drains from right to left /\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--colour-brand-teal, #00B5AD);\n border-radius: 2px;\n / Smooth animation for progress /\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 background-color: #B8C9C5;\n border-radius: 20px;\n overflow: hidden;\n / Take up remaining space and stretch full height /\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: 32px;\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@media (max-width: 1024px) {\n .feature-accordion {\n padding: 60px 0;\n }\n\n .feature-accordion__container {\n padding: 0 24px;\n }\n\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@media (max-width: 768px) {\n .feature-accordion {\n padding: 48px 0;\n }\n\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@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":"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"}
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":[":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 --_level-1-bg: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\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(--colour-brand-ice, #a6fffb);\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 background-color: var(--_level-1-bg);\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: 32px;\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@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@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":"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"}

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

@@ -0,0 +1,59 @@
+'use strict';
+var index = require('./index-ybEiHT0b.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%}.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}.feature-card__background-image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center}.feature-card__overlay.sc-af-feature-card{position:absolute;bottom:0;left:0;right: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))}[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}.feature-card__image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center top}.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}}";
+const AfFeatureCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Theme variant - sets background color and provides theme context.
+         * Only applies to 'standard' layout mode. Defaults to 'mist-green'.
+         */
+        this.theme = 'mist-green';
+        /**
+         * Layout mode for the card.
+         * - 'standard': Theme background with text at top and image at bottom
+         * - 'full-bleed': Image covers entire card with text overlay at bottom
+         */
+        this.layout = 'standard';
+        /**
+         * Card size variant.
+         * - 'default': Fixed 544px × 420px
+         * - 'large': Fixed 777px × 480px
+         * - 'flexible': Fills container (for grid layouts)
+         */
+        this.cardSize = 'default';
+        /**
+         * Heading size for typography lockup (1-5, where 1 is largest).
+         */
+        this.headingSize = 3;
+        /**
+         * Image alt text for accessibility.
+         * Provide meaningful alt text for feature images.
+         * Only use empty string for purely decorative images.
+         */
+        this.imageAlt = '';
+    }
+    render() {
+        const hasImage = !!this.imageSrc;
+        const isFullBleed = this.layout === 'full-bleed';
+        const wrapperClasses = {
+            'feature-card': true,
+            [`feature-card--layout-${this.layout}`]: true,
+            [`feature-card--size-${this.cardSize}`]: true,
+        };
+        // Full-bleed mode: image background with overlay
+        if (isFullBleed) {
+            return (index.h(index.Host, null, index.h("div", { class: wrapperClasses }, hasImage && (index.h("div", { class: "feature-card__background" }, index.h("img", { src: this.imageSrc, alt: this.imageAlt, class: "feature-card__background-image" }))), index.h("div", { class: "feature-card__overlay" }, index.h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical" }, index.h("slot", null), index.h("span", { slot: "description" }, index.h("slot", { name: "body" })))))));
+        }
+        // Standard mode: theme card with image at bottom
+        const isFlexible = this.cardSize === 'flexible';
+        return (index.h(index.Host, null, index.h("div", { class: wrapperClasses }, index.h("af-card", { theme: this.theme, stretch: isFlexible }, index.h("div", { class: "feature-card__content" }, index.h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical" }, index.h("slot", null), index.h("span", { slot: "description" }, index.h("slot", { name: "body" })))), hasImage && (index.h("div", { class: "feature-card__image-area" }, index.h("img", { src: this.imageSrc, alt: this.imageAlt, class: "feature-card__image" })))))));
+    }
+};
+AfFeatureCard.style = afFeatureCardCss;
+exports.af_feature_card = AfFeatureCard;
+//# sourceMappingURL=af-feature-card.entry.cjs.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"af-feature-card.entry.cjs.js","sources":["src/components/af-feature-card/af-feature-card.css?tag=af-feature-card&encapsulation=scoped","src/components/af-feature-card/af-feature-card.tsx"],"sourcesContent":["/* ==========================================================================\n Feature Card - Figma Specs\n \n Desktop Full-bleed: 544px × 660px, radius 32px\n Desktop Standard default: 544px width, radius 32px\n Desktop Standard large: 777px width, radius 32px\n Mobile Full-bleed: 335px × 442px, radius 24px\n Mobile Standard: 335px width, radius 24px\n ========================================================================== */\n\n/* ==========================================================================\n Host Element - Controls outer dimensions\n ========================================================================== */\n\n:host {\n display: block;\n --af-card-padding: 0;\n --af-card-gap: 0;\n}\n\n/* Fixed size hosts constrain to Figma dimensions */\n:host([card-size=\"default\"]) {\n width: 544px;\n}\n\n:host([card-size=\"large\"]) {\n width: 777px;\n}\n\n/* Flexible cards fill their container */\n:host([card-size=\"flexible\"]) {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n/* ==========================================================================\n Base Feature Card Styles\n ========================================================================== */\n\n.feature-card {\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: var(--border-radius-card-level-1, 32px);\n width: 100%;\n height: 100%;\n}\n\n/* ==========================================================================\n Full Bleed Layout Mode\n Figma: 544px × 660px (desktop), 335px × 442px (mobile)\n ========================================================================== */\n\n.feature-card--layout-full-bleed {\n background: var(--background-base, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Full-bleed fixed sizes have explicit heights on host */\n:host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n:host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n height: 660px;\n}\n\n/* Full-bleed flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n min-height: 480px;\n}\n\n.feature-card__background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n.feature-card__background-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n/* Overlay gradient with text */\n.feature-card__overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n backdrop-filter: blur(2px);\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n z-index: 1;\n /* Desktop: pt-124px px-32px pb-32px */\n padding: 124px 32px 32px 32px;\n\n /* White text on dark overlay */\n --af-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n --af-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n --af-typography-body-default: var(--typography-body-dark, #ffffff);\n --colour-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n --colour-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n --colour-typography-body-default: var(--typography-body-dark, #ffffff);\n}\n\n/* ==========================================================================\n Standard Layout Mode\n \n Structure: .feature-card > af-card[stretch] > [content] + [image-area]\n \n When cardSize=\"flexible\", af-card receives stretch prop which enables\n the flex chain. Content grows to fill space, image stays at bottom.\n ========================================================================== */\n\n.feature-card--layout-standard {\n background: var(--background-level-1, var(--colour-mistgreen-200, #e8eeed));\n}\n\n/* Standard flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-standard {\n min-height: 400px;\n}\n\n/* Content area - grows to push image to bottom (when af-card has stretch) */\n.feature-card__content {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n z-index: 1;\n /* Desktop default: pt-40px px-32px pb-12px */\n padding: 40px 32px 12px 32px;\n flex: 1 1 auto;\n}\n\n/* Large card content padding: pt-40px px-40px pb-0 */\n:host([card-size=\"large\"]) .feature-card__content {\n padding: 40px 40px 0 40px;\n}\n\n/* ==========================================================================\n Image Area (Standard Layout)\n Figma: 160px height (desktop), 192px height (mobile)\n ========================================================================== */\n\n.feature-card__image-area {\n position: relative;\n width: 100%;\n height: 160px;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.feature-card__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center top;\n}\n\n/* ==========================================================================\n Typography Lockup Styling\n ========================================================================== */\n\n.feature-card af-typography-lockup {\n --colour-typography-heading-primary: var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));\n --colour-typography-body-default: var(--af-typography-body-default, var(--typography-body-default, #2b484f));\n}\n\n/* ==========================================================================\n Mobile Responsive Styles (max-width: 768px)\n \n Figma:\n - Full-bleed: 335px × 442px, radius 24px\n - Standard: 335px width, radius 24px\n ========================================================================== */\n\n@media (max-width: 768px) {\n .feature-card {\n border-radius: var(--border-radius-card-level-1, 24px);\n }\n\n /* Mobile fixed widths on host */\n :host([card-size=\"default\"]),\n :host([card-size=\"large\"]) {\n width: 335px;\n }\n\n /* Mobile full-bleed height: 442px */\n :host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n :host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n height: 442px;\n }\n\n /* Mobile flexible minimum heights */\n :host([card-size=\"flexible\"]) .feature-card--layout-standard {\n min-height: 340px;\n }\n\n :host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n min-height: 380px;\n }\n\n /* Mobile overlay padding: pt-80px px-24px pb-28px */\n .feature-card__overlay {\n padding: 80px 24px 28px 24px;\n }\n\n /* Mobile content padding: pt-32px px-24px pb-12px */\n .feature-card__content {\n padding: 32px 24px 12px 24px;\n }\n\n /* Mobile image area: 192px height */\n .feature-card__image-area {\n height: 192px;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n */\n@Component({\n tag: 'af-feature-card',\n styleUrl: 'af-feature-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureCard {\n /**\n * Theme variant - sets background color and provides theme context.\n * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n */\n @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n /**\n * Layout mode for the card.\n * - 'standard': Theme background with text at top and image at bottom\n * - 'full-bleed': Image covers entire card with text overlay at bottom\n */\n @Prop() layout: 'standard' | 'full-bleed' = 'standard';\n\n /**\n * Card size variant.\n * - 'default': Fixed 544px × 420px\n * - 'large': Fixed 777px × 480px \n * - 'flexible': Fills container (for grid layouts)\n */\n @Prop({ reflect: true }) cardSize: 'default' | 'large' | 'flexible' = 'default';\n\n /**\n * Heading size for typography lockup (1-5, where 1 is largest).\n */\n @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 3;\n\n /**\n * Background/feature image URL.\n */\n @Prop() imageSrc?: string;\n\n /**\n * Image alt text for accessibility.\n * Provide meaningful alt text for feature images.\n * Only use empty string for purely decorative images.\n */\n @Prop() imageAlt: string = '';\n\n render() {\n const hasImage = !!this.imageSrc;\n const isFullBleed = this.layout === 'full-bleed';\n\n const wrapperClasses = {\n 'feature-card': true,\n [`feature-card--layout-${this.layout}`]: true,\n [`feature-card--size-${this.cardSize}`]: true,\n };\n\n // Full-bleed mode: image background with overlay\n if (isFullBleed) {\n return (\n <Host>\n <div class={wrapperClasses}>\n {/* Background image */}\n {hasImage && (\n <div class=\"feature-card__background\">\n <img\n src={this.imageSrc}\n alt={this.imageAlt}\n class=\"feature-card__background-image\"\n />\n </div>\n )}\n\n {/* Content overlay with gradient */}\n <div class=\"feature-card__overlay\">\n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n </div>\n </Host>\n );\n }\n\n // Standard mode: theme card with image at bottom\n const isFlexible = this.cardSize === 'flexible';\n \n return (\n <Host>\n <div class={wrapperClasses}>\n <af-card theme={this.theme} stretch={isFlexible}>\n {/* Content area with typography lockup */}\n <div class=\"feature-card__content\">\n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n\n {/* Image area at bottom */}\n {hasImage && (\n <div class=\"feature-card__image-area\">\n <img\n src={this.imageSrc}\n alt={this.imageAlt}\n class=\"feature-card__image\"\n />\n </div>\n )}\n </af-card>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -0,0 +1,93 @@
+'use strict';
+var index = require('./index-ybEiHT0b.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: 768px){.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: 769px) and (max-width: 1024px){.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)}}";
+const AfFeatureGrid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Number of columns on desktop (1-4).
+         */
+        this.columns = 4;
+        /**
+         * Mobile layout behavior.
+         * - 'list': Vertical stack (1 column)
+         * - 'scroll': Horizontal scroll with progress indicator
+         * - 'grid': Maintain 2-column grid on mobile
+         */
+        this.mobileLayout = 'list';
+        this.scrollProgress = 0;
+        this.handleScroll = () => {
+            if (!this.scrollContainer)
+                return;
+            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+            const maxScroll = scrollWidth - clientWidth;
+            if (maxScroll > 0) {
+                this.scrollProgress = scrollLeft / maxScroll;
+            }
+            else {
+                this.scrollProgress = 0;
+            }
+        };
+    }
+    componentDidLoad() {
+        this.setupScrollListener();
+        // Watch for cards being added (for React async rendering)
+        this.observer = new MutationObserver(() => {
+            this.setupScrollListener();
+        });
+        this.observer.observe(this.host, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    onMobileLayoutChange() {
+        this.setupScrollListener();
+    }
+    setupScrollListener() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+        }
+        requestAnimationFrame(() => {
+            this.scrollContainer = this.host.querySelector('.feature-grid__cards');
+            if (this.scrollContainer && this.mobileLayout === 'scroll') {
+                this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+                this.handleScroll();
+                if (this.resizeObserver) {
+                    this.resizeObserver.disconnect();
+                }
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.handleScroll();
+                });
+                this.resizeObserver.observe(this.scrollContainer);
+            }
+        });
+    }
+    render() {
+        const gridClasses = {
+            'feature-grid': true,
+            [`feature-grid--cols-${this.columns}`]: true,
+            [`feature-grid--mobile-${this.mobileLayout}`]: true,
+        };
+        const showProgressLine = this.mobileLayout === 'scroll';
+        return (index.h(index.Host, { key: '9f86e8111e73d046e6e391d54781972ca0c1a78a' }, index.h("div", { key: '409d9c22be533612e2f079f38bc613e3a1f35fe2', class: gridClasses }, index.h("div", { key: '18261ef9c3dab6b7dfc5c947fd0b21712f1e6416', class: "feature-grid__cards" }, index.h("slot", { key: '9f90257092482cce17c374813116bf5ea6338401' })), showProgressLine && (index.h("div", { key: '208800f5dfe5d944f9bc4198fbe656696471ce21', class: "feature-grid__progress" }, index.h("af-progress-line", { key: 'c95b717d018803c4f56a9066bf7aa869c01cb1aa', progress: this.scrollProgress }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "mobileLayout": ["onMobileLayoutChange"]
+    }; }
+};
+AfFeatureGrid.style = afFeatureGridCss;
+exports.af_feature_grid = AfFeatureGrid;
+//# sourceMappingURL=af-feature-grid.entry.cjs.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"af-feature-grid.entry.cjs.js","sources":["src/components/af-feature-grid/af-feature-grid.css?tag=af-feature-grid&encapsulation=scoped","src/components/af-feature-grid/af-feature-grid.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Base Feature Grid Styles\n ========================================================================== */\n\n.feature-grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n\n/* ==========================================================================\n Cards Container - CSS Grid Layout\n ========================================================================== */\n\n.feature-grid__cards {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n width: 100%;\n max-width: 1440px;\n align-items: stretch;\n}\n\n/* Ensure feature cards fill their grid cells */\n.feature-grid__cards>af-feature-card {\n height: 100%;\n}\n\n/* Column variants */\n.feature-grid--cols-3 .feature-grid__cards {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.feature-grid--cols-2 .feature-grid__cards {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.feature-grid--cols-1 .feature-grid__cards {\n grid-template-columns: 1fr;\n}\n\n/* ==========================================================================\n Progress Line (scroll mode indicator)\n ========================================================================== */\n\n.feature-grid__progress {\n display: none;\n width: 100%;\n margin-top: 16px;\n}\n\n/* ==========================================================================\n Mobile Responsive Styles (max-width: 768px)\n ========================================================================== */\n\n@media (max-width: 768px) {\n .feature-grid__cards {\n gap: 16px;\n }\n\n /* Mobile List Mode - single column stack */\n .feature-grid--mobile-list .feature-grid__cards {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n /* Mobile Grid Mode - keep 2 columns */\n .feature-grid--mobile-grid .feature-grid__cards {\n grid-template-columns: repeat(2, 1fr);\n }\n\n /* Mobile Scroll Mode - horizontal scroll */\n .feature-grid--mobile-scroll .feature-grid__cards {\n display: flex;\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n -webkit-overflow-scrolling: touch;\n gap: 16px;\n padding-bottom: 8px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n\n .feature-grid--mobile-scroll .feature-grid__cards::-webkit-scrollbar {\n display: none;\n }\n\n .feature-grid--mobile-scroll .feature-grid__cards>af-feature-card {\n flex: 0 0 280px;\n scroll-snap-align: start;\n }\n\n .feature-grid--mobile-scroll .feature-grid__progress {\n display: block;\n }\n}\n\n/* ==========================================================================\n Tablet breakpoint (769px - 1024px)\n ========================================================================== */\n\n@media (min-width: 769px) and (max-width: 1024px) {\n .feature-grid__cards {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .feature-grid--cols-3 .feature-grid__cards,\n .feature-grid--cols-4 .feature-grid__cards {\n grid-template-columns: repeat(2, 1fr);\n }\n}","import { Component, Prop, State, h, Host, Element, Watch } from '@stencil/core';\n\n/**\n * Feature Grid component - CSS Grid container for feature cards.\n *\n * Desktop: Configurable columns (1-4)\n * Mobile: List (stacked), horizontal scroll, or 2-column grid\n *\n * @slot - Feature card components (af-feature-card)\n */\n@Component({\n tag: 'af-feature-grid',\n styleUrl: 'af-feature-grid.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureGrid {\n @Element() host!: HTMLElement;\n\n /**\n * Number of columns on desktop (1-4).\n */\n @Prop() columns: 1 | 2 | 3 | 4 = 4;\n\n /**\n * Mobile layout behavior.\n * - 'list': Vertical stack (1 column)\n * - 'scroll': Horizontal scroll with progress indicator\n * - 'grid': Maintain 2-column grid on mobile\n */\n @Prop() mobileLayout: 'list' | 'scroll' | 'grid' = 'list';\n\n @State() scrollProgress: number = 0;\n\n private scrollContainer: HTMLElement | undefined;\n private observer: MutationObserver | undefined;\n private resizeObserver: ResizeObserver | undefined;\n\n componentDidLoad() {\n this.setupScrollListener();\n\n // Watch for cards being added (for React async rendering)\n this.observer = new MutationObserver(() => {\n this.setupScrollListener();\n });\n\n this.observer.observe(this.host, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n @Watch('mobileLayout')\n onMobileLayoutChange() {\n this.setupScrollListener();\n }\n\n private setupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n }\n\n requestAnimationFrame(() => {\n this.scrollContainer = this.host.querySelector('.feature-grid__cards') as HTMLElement;\n\n if (this.scrollContainer && this.mobileLayout === 'scroll') {\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll();\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n this.resizeObserver = new ResizeObserver(() => {\n this.handleScroll();\n });\n this.resizeObserver.observe(this.scrollContainer);\n }\n });\n }\n\n private handleScroll = () => {\n if (!this.scrollContainer) return;\n\n const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;\n const maxScroll = scrollWidth - clientWidth;\n\n if (maxScroll > 0) {\n this.scrollProgress = scrollLeft / maxScroll;\n } else {\n this.scrollProgress = 0;\n }\n };\n\n render() {\n const gridClasses = {\n 'feature-grid': true,\n [`feature-grid--cols-${this.columns}`]: true,\n [`feature-grid--mobile-${this.mobileLayout}`]: true,\n };\n\n const showProgressLine = this.mobileLayout === 'scroll';\n\n return (\n <Host>\n <div class={gridClasses}>\n <div class=\"feature-grid__cards\">\n <slot></slot>\n </div>\n\n {showProgressLine && (\n <div class=\"feature-grid__progress\">\n <af-progress-line progress={this.scrollProgress} />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+'use strict';
+var index = require('./index-ybEiHT0b.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(--colour-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%}";
+const AfFieldset = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The layout orientation of the fieldset items
+         * - `vertical` - Items stack vertically (default)
+         * - `horizontal` - Items are laid out horizontally
+         */
+        this.orientation = 'vertical';
+        /**
+         * Whether the fieldset is disabled (disables all child controls)
+         */
+        this.disabled = false;
+    }
+    render() {
+        const fieldsetClasses = {
+            'fieldset': true,
+            [`orientation-${this.orientation}`]: true,
+            'disabled': this.disabled
+        };
+        const itemsClasses = {
+            'items': true,
+            [`orientation-${this.orientation}`]: true
+        };
+        return (index.h(index.Host, { key: '367a58328f883d5df31989021ad7dba14ed3ab6c' }, index.h("fieldset", { key: 'f43a04b8808db04886a0997b42593af2445b185d', class: fieldsetClasses, disabled: this.disabled }, this.legend && (index.h("legend", { key: 'fc08d5e1464ffeb00005fda04169ceb2654a00b8', class: "legend" }, this.legend)), index.h("div", { key: '815f2dc77dc417791e1a3d736e1b0ce91250a325', class: itemsClasses }, index.h("slot", { key: 'd080ec923b57a3ae95cc868be6bf42b57df08e7a' })))));
+    }
+};
+AfFieldset.style = afFieldsetCss;
+exports.af_fieldset = AfFieldset;
+//# sourceMappingURL=af-fieldset.entry.cjs.js.map

package/dist/cjs/af-fieldset.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-fieldset.entry.cjs.js","sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.fieldset {\n display: flex;\n flex-direction: column;\n border: none;\n padding: 0;\n margin: 0;\n min-inline-size: 0;\n}\n\n.fieldset.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n display: block;\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: var(--font-size-heading-5-desktop, 20px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n color: var(--colour-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n padding: 0;\n margin: 0 0 12px 0;\n width: 100%;\n}\n\n/* Items container */\n.items {\n display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n flex-direction: column;\n gap: 8px;\n align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 28px;\n align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n tag: 'af-fieldset',\n styleUrl: 'af-fieldset.css',\n shadow: true\n})\nexport class AfFieldset {\n /**\n * The legend/heading text for the fieldset\n */\n @Prop() legend?: string;\n\n /**\n * The layout orientation of the fieldset items\n * - `vertical` - Items stack vertically (default)\n * - `horizontal` - Items are laid out horizontally\n */\n @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n /**\n * Whether the fieldset is disabled (disables all child controls)\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n render() {\n const fieldsetClasses = {\n 'fieldset': true,\n [`orientation-${this.orientation}`]: true,\n 'disabled': this.disabled\n };\n\n const itemsClasses = {\n 'items': true,\n [`orientation-${this.orientation}`]: true\n };\n\n return (\n <Host>\n <fieldset class={fieldsetClasses} disabled={this.disabled}>\n {this.legend && (\n <legend class=\"legend\">{this.legend}</legend>\n )}\n <div class={itemsClasses}>\n <slot></slot>\n </div>\n </fieldset>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,g1BAAg1B;;MCaz1B,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACVA,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-DfEVhbS6.js');
+var index = require('./index-ybEiHT0b.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}";
@@ -11,7 +11,7 @@ const AfFooterColumn = class {
         this.heading = '';
     }
     render() {
-        return (index.h(index.Host, { key: '4725b29d110800bac1faec33016a469bc4f9048e' }, index.h("div", { key: 'ad7d4a123027f6395bc56a70c59586390799f3ff', class: "footer-column" }, this.heading && (index.h("h5", { key: '4fd379858460d92e59e077f3c96719e0e65044c5', class: "footer-column__heading" }, this.heading)), index.h("ul", { key: '17e4adc50c90b4b7f71abe605672d7e63a424c51', class: "footer-column__list" }, index.h("slot", { key: 'c88bf1c9e6ba0a00ca9c9d22fe17508b7a891d44' })))));
+        return (index.h(index.Host, { key: '90953efd8907072a4a9c336f5a47eafe0317af61' }, index.h("div", { key: 'cef4b4554d8384e86e24c6329f35a8d9eadf6f44', class: "footer-column" }, this.heading && (index.h("h5", { key: '22119f6749453837427dc0438254b271f13d81f6', class: "footer-column__heading" }, this.heading)), index.h("ul", { key: '6a51a9e7e210654d410842b6b2e9c76054c0ecb8', class: "footer-column__list" }, index.h("slot", { key: '5bc741d972164228b460f30981cc306cdd7435fa' })))));
     }
 };
 AfFooterColumn.style = afFooterColumnCss;

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-DfEVhbS6.js');
+var index = require('./index-ybEiHT0b.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}";
@@ -13,7 +13,7 @@ const AfFooterLink = class {
         this.external = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'bd5e75cc92ab3bbf50edb472f7522ab3d1c0f56d' }, index.h("li", { key: '45f8e447b46a79af851c5ac0d7329101e9da4061' }, index.h("a", { key: '569de0a6bd3ef8171507e4fa7d1cf52d707e8eb7', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, index.h("slot", { key: '29cdfcec2c4357b2326fbae766c6a5bcb3c0b4c4' }), this.external && (index.h("svg", { key: '9f2d82cb5a93836c308feca7e3748980b88e2cbe', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, index.h("path", { key: '40543ee1f0ca0e718a12ebc7b592cd9520bd6dd7', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (index.h(index.Host, { key: '121d2b0936ddfa70eb6a2db79fc0ae41b28245a8' }, index.h("li", { key: '8528d61539f57e05277b3af353d22e43f61e6c52' }, index.h("a", { key: '05da59ba1868f89e6cc849428b784d530158c0c8', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, index.h("slot", { key: '33aa087cc0634c62e79df7fa210c897720845623' }), this.external && (index.h("svg", { key: 'e024e5e1768b11d113943af0c48a0ae894f4d76d', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, index.h("path", { key: 'c0ccfe70f94d6df8057ccd1c8ea151e27b9c2dc5', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
 };
 AfFooterLink.style = afFooterLinkCss;

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-DfEVhbS6.js');
+var index = require('./index-ybEiHT0b.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:#22c55e}.footer__status-dot--issue.sc-af-footer{background-color:#ef4444}.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:24px;padding-right:24px}.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:16px;padding-right:16px}.footer__badges.sc-af-footer{width:100%;justify-content:flex-start}}";
@@ -19,7 +19,7 @@ const AfFooter = class {
         this.showStatus = true;
     }
     render() {
-        return (index.h(index.Host, { key: '0ead00f00cafcba90071c76f4cb86d6abb1a8e9b' }, index.h("footer", { key: '1e29dad6f35c3a0a7c7acf6bde94d7d26c9f3518', class: "footer" }, index.h("div", { key: '92921a50cbb917fb797a1cd396ea326626be2672', class: "footer__container" }, index.h("div", { key: 'fb7f0c881a3540149af3fd5c9ce5cf4fcf4dc463', class: "footer__top" }, index.h("div", { key: 'dfbab144d98aaa7c5bdeac21b2f7059c2c35c3a2', class: "footer__brand" }, index.h("div", { key: '70a5b6514a32f48e239eed456625b00e5480d515', class: "footer__brand-card" }, index.h("div", { key: '29cebd0316e5e05125545ddc4a6daff19d045569', class: "footer__logo" }, index.h("slot", { key: '1bf39b815103c7ad1ddd9a1a480e1c0ba229e940', name: "logo" })), index.h("div", { key: 'ece78ebc0a579a1425e761e75e91dfe048963057', class: "footer__social" }, index.h("slot", { key: '77713bb66e6a687cfe703af581477112af5a2a56', name: "social" }))), index.h("div", { key: '1224cc9b12934d9a8fc3ead8cb0e78483b391955', class: "footer__contact-card" }, index.h("slot", { key: '3d9ca05b638de9ef155be333ee430107074c933d', name: "contact" }))), index.h("div", { key: '2de06953b17dc7317b6b37c7a5468459efdd11ca', class: "footer__nav" }, index.h("div", { key: '14875d9d7c74722eb703c8c3691ccfc8c1790915', class: "footer__nav-columns" }, index.h("slot", { key: '477ab833a047495184f671fe0767736963a4ecb6', name: "nav" })), this.showStatus && (index.h("div", { key: 'f6e59d3e541d5d7e3688d0ea1f6c24742894fa04', class: "footer__status" }, index.h("span", { key: 'f073d332a366619573ec4b5535117ccc56eed0dc', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), index.h("span", { key: '467e8e24c56e240b84eacd80f390db29ce30d3ac', class: "footer__status-text" }, this.statusText), this.statusUrl && (index.h("a", { key: '630dc864ceabac404a118c8525fe16edd381a28a', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), index.h("div", { key: '64db3298cdef7d1651234f19319a7aead0fc66ed', class: "footer__bottom" }, this.copyrightText && (index.h("p", { key: 'b268e4cfe2414f94a28492af15bfd3d2b3d53767', class: "footer__copyright" }, this.copyrightText)), index.h("div", { key: '82af0bd4b7310ff9e783b74fbccca3e2df437c86', class: "footer__legal" }, index.h("slot", { key: 'e3cd11fd6f41a577a2452f8e48d524e3a6a2ea46', name: "legal" })), index.h("div", { key: 'b0d6caf4168e1013d682f0b36a480607343cfd6f', class: "footer__badges" }, index.h("slot", { key: '28e7722adc3f88f968c478957d21aa55c451d553', name: "badges" })))))));
+        return (index.h(index.Host, { key: '58d15bfa72370f9d72767081d7d821ce7e5cfcad' }, index.h("footer", { key: 'f53cc2cb44f334bc6709344d11663bbc8facbde4', class: "footer" }, index.h("div", { key: 'ad17b47d33fad7fea79fee647817ee8dceade8b8', class: "footer__container" }, index.h("div", { key: '24bf87ec90f567b260fdc3bd7f70c76fc72789bc', class: "footer__top" }, index.h("div", { key: '272bbb94a4d889579b9991c016165a7376559024', class: "footer__brand" }, index.h("div", { key: 'f1a892dab1d6ce935451978ae4584dfd0d50bca4', class: "footer__brand-card" }, index.h("div", { key: '15818798cdfd09873836e109472556a224a40f56', class: "footer__logo" }, index.h("slot", { key: 'd753c7044f3870ec66cf37da700cc2bf2aceda2c', name: "logo" })), index.h("div", { key: '2660af6bab2666242dfffe25dc81e050693d024e', class: "footer__social" }, index.h("slot", { key: '76dd64ed787aaa4698ca3687673b32899ed4a6a2', name: "social" }))), index.h("div", { key: '71c365eae2e2f2748cf42978179a1047d51dd391', class: "footer__contact-card" }, index.h("slot", { key: 'df48c5734759ac12a8ef398cf5002c793f02a309', name: "contact" }))), index.h("div", { key: 'b78002e34cc197ab9157697c48eeded05a3acdcd', class: "footer__nav" }, index.h("div", { key: '715717dd80882654ca91ccaf5474953b827f08a3', class: "footer__nav-columns" }, index.h("slot", { key: '062c88854fbd11d4c007e7daf166828db8db2131', name: "nav" })), this.showStatus && (index.h("div", { key: '39cd615cff666e79f0ed91ef90f6ad414f89addd', class: "footer__status" }, index.h("span", { key: '8396b890dc62b5f65c9ba5eaff2db72b83709a2a', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), index.h("span", { key: '5266b10f2e2e8129425cd61acd0865cc6be38ec0', class: "footer__status-text" }, this.statusText), this.statusUrl && (index.h("a", { key: 'c4e999a03cbb89eaaaae079250c9eda8756ca8d6', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), index.h("div", { key: '354acdb5d3442c876affc6e44c0e3541a27ff06f', class: "footer__bottom" }, this.copyrightText && (index.h("p", { key: '677a8291f263b026a01855422fc08ddd7fb69b89', class: "footer__copyright" }, this.copyrightText)), index.h("div", { key: '46b34f1634c53ff716c53ee575e1894c60b056e8', class: "footer__legal" }, index.h("slot", { key: 'f7ed01d5374e9c7d627ccf47413f62f7ab049ae7', name: "legal" })), index.h("div", { key: 'db6a6911e45c9c50e2c53d21e4aab25d3aa331f7', class: "footer__badges" }, index.h("slot", { key: '1fa6134c03aac63734592e4325663a1e91f92f02', name: "badges" })))))));
     }
 };
 AfFooter.style = afFooterCss;

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

@@ -0,0 +1,51 @@
+'use strict';
+var index = require('./index-ybEiHT0b.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}}";
+const AfGridCallout = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Alt text for the image (required for accessibility when imageSrc is provided)
+         */
+        this.imageAlt = '';
+        /**
+         * Position of the image relative to the content
+         */
+        this.imagePosition = 'left';
+        /**
+         * Number of columns for the IconText grid on desktop
+         */
+        this.columns = 2;
+        /**
+         * Heading size for the main title
+         */
+        this.headingSize = 2;
+    }
+    render() {
+        const hasImage = !!this.imageSrc;
+        const containerClasses = {
+            'grid-callout': true,
+            'grid-callout--has-image': hasImage,
+            'grid-callout--no-image': !hasImage,
+            [`grid-callout--image-${this.imagePosition}`]: hasImage,
+        };
+        const gridClasses = {
+            'grid-callout__items': true,
+            [`grid-callout__items--cols-${this.columns}`]: true,
+        };
+        const renderImage = () => {
+            if (!hasImage)
+                return null;
+            return (index.h("div", { class: "grid-callout__image-container" }, index.h("img", { src: this.imageSrc, alt: this.imageAlt, class: "grid-callout__image" })));
+        };
+        const renderContent = () => (index.h("div", { class: "grid-callout__content" }, index.h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "grid-callout__heading" }, index.h("slot", null), index.h("span", { slot: "description" }, index.h("slot", { name: "description" }))), index.h("div", { class: gridClasses }, index.h("slot", { name: "items" })), index.h("div", { class: "grid-callout__cta" }, index.h("slot", { name: "cta" }))));
+        return (index.h(index.Host, null, index.h("div", { class: containerClasses }, this.imagePosition === 'left' && renderImage(), renderContent(), this.imagePosition === 'right' && renderImage())));
+    }
+};
+AfGridCallout.style = afGridCalloutCss;
+exports.af_grid_callout = AfGridCallout;
+//# sourceMappingURL=af-grid-callout.entry.cjs.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"af-grid-callout.entry.cjs.js","sources":["src/components/af-grid-callout/af-grid-callout.css?tag=af-grid-callout&encapsulation=scoped","src/components/af-grid-callout/af-grid-callout.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.grid-callout {\n display: flex;\n width: 100%;\n gap: 40px;\n align-items: stretch;\n}\n\n/* ==========================================================================\n Image Container - Pill shape with rounded right edge\n ========================================================================== */\n\n.grid-callout__image-container {\n flex: 0 0 auto;\n width: 45%;\n min-height: 400px;\n position: relative;\n overflow: hidden;\n}\n\n/* Left position - rounded on right side */\n.grid-callout--image-left .grid-callout__image-container {\n border-radius: 0 4000px 4000px 0;\n margin-left: calc(-1 * var(--container-padding, 80px));\n}\n\n/* Right position - rounded on left side */\n.grid-callout--image-right .grid-callout__image-container {\n border-radius: 4000px 0 0 4000px;\n margin-right: calc(-1 * var(--container-padding, 80px));\n}\n\n.grid-callout__image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* ==========================================================================\n Content Area\n ========================================================================== */\n\n.grid-callout__content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 48px;\n padding: 40px 0;\n}\n\n/* Add left padding when image is on left */\n.grid-callout--image-left .grid-callout__content {\n padding-left: 40px;\n}\n\n/* Add right padding when image is on right */\n.grid-callout--image-right .grid-callout__content {\n padding-right: 40px;\n}\n\n/* No image layout - full width content */\n.grid-callout--no-image {\n flex-direction: column;\n}\n\n.grid-callout--no-image .grid-callout__content {\n padding: 0;\n}\n\n.grid-callout__heading {\n max-width: 840px;\n}\n\n/* ==========================================================================\n Items Grid\n ========================================================================== */\n\n.grid-callout__items {\n display: grid;\n gap: 40px;\n width: 100%;\n}\n\n.grid-callout__items--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.grid-callout__items--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.grid-callout__items--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* ==========================================================================\n CTA Area\n ========================================================================== */\n\n.grid-callout__cta {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.grid-callout__cta:empty {\n display: none;\n}\n\n/* ==========================================================================\n Responsive - Tablet\n ========================================================================== */\n\n@media (max-width: 1024px) {\n .grid-callout {\n gap: 32px;\n }\n\n .grid-callout__image-container {\n width: 40%;\n }\n\n .grid-callout__content {\n gap: 40px;\n }\n\n .grid-callout__items--cols-3,\n .grid-callout__items--cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .grid-callout__items {\n gap: 32px;\n }\n}\n\n/* ==========================================================================\n Responsive - Mobile\n ========================================================================== */\n\n@media (max-width: 768px) {\n .grid-callout {\n flex-direction: column;\n gap: 32px;\n }\n\n .grid-callout__image-container {\n width: calc(100% + 2 * var(--container-padding, 20px));\n min-height: 280px;\n margin-left: calc(-1 * var(--container-padding, 20px));\n margin-right: calc(-1 * var(--container-padding, 20px));\n border-radius: 0;\n }\n\n /* Reset rounded corners on mobile */\n .grid-callout--image-left .grid-callout__image-container,\n .grid-callout--image-right .grid-callout__image-container {\n border-radius: 0;\n margin-left: calc(-1 * var(--container-padding, 20px));\n margin-right: calc(-1 * var(--container-padding, 20px));\n }\n\n .grid-callout__content {\n padding: 0;\n gap: 32px;\n }\n\n .grid-callout--image-left .grid-callout__content,\n .grid-callout--image-right .grid-callout__content {\n padding-left: 0;\n padding-right: 0;\n }\n\n .grid-callout__items {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n .grid-callout__items--cols-2,\n .grid-callout__items--cols-3,\n .grid-callout__items--cols-4 {\n grid-template-columns: 1fr;\n }\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * GridCallout organism - a marketing section combining an optional pill-shaped image \n * with a grid of IconText feature items.\n * \n * Composes:\n * - Pill-shaped image container (optional)\n * - Heading via af-typography-lockup\n * - Grid of af-icon-text items\n * - Optional CTA button\n * \n * Inherits theme colors from parent af-section via CSS custom properties.\n * \n * @slot - Main heading text\n * @slot description - Optional description/subheading text\n * @slot items - IconText components for the feature grid\n * @slot cta - CTA button(s) at the bottom\n * \n * @example\n * ```html\n * <af-section theme=\"mist-green\">\n * <af-grid-callout image-src=\"/team.jpg\" image-alt=\"Team photo\">\n * Affinda blends AI and engineering\n * <span slot=\"description\">Optional description text.</span>\n * \n * <af-icon-text slot=\"items\" icon=\"settings\">\n * Feature One\n * <span slot=\"description\">Feature description.</span>\n * </af-icon-text>\n * \n * <af-button slot=\"cta\" variant=\"primary\">Learn more</af-button>\n * </af-grid-callout>\n * </af-section>\n * ```\n */\n@Component({\n tag: 'af-grid-callout',\n styleUrl: 'af-grid-callout.css',\n shadow: false,\n scoped: true,\n})\nexport class AfGridCallout {\n /**\n * Image source URL for the pill-shaped image\n */\n @Prop() imageSrc?: string;\n\n /**\n * Alt text for the image (required for accessibility when imageSrc is provided)\n */\n @Prop() imageAlt: string = '';\n\n /**\n * Position of the image relative to the content\n */\n @Prop() imagePosition: 'left' | 'right' = 'left';\n\n /**\n * Number of columns for the IconText grid on desktop\n */\n @Prop() columns: 2 | 3 | 4 = 2;\n\n /**\n * Heading size for the main title\n */\n @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n render() {\n const hasImage = !!this.imageSrc;\n \n const containerClasses = {\n 'grid-callout': true,\n 'grid-callout--has-image': hasImage,\n 'grid-callout--no-image': !hasImage,\n [`grid-callout--image-${this.imagePosition}`]: hasImage,\n };\n\n const gridClasses = {\n 'grid-callout__items': true,\n [`grid-callout__items--cols-${this.columns}`]: true,\n };\n\n const renderImage = () => {\n if (!hasImage) return null;\n \n return (\n <div class=\"grid-callout__image-container\">\n <img \n src={this.imageSrc} \n alt={this.imageAlt}\n class=\"grid-callout__image\"\n />\n </div>\n );\n };\n\n const renderContent = () => (\n <div class=\"grid-callout__content\">\n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n class=\"grid-callout__heading\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"description\"></slot>\n </span>\n </af-typography-lockup>\n\n <div class={gridClasses}>\n <slot name=\"items\"></slot>\n </div>\n\n <div class=\"grid-callout__cta\">\n <slot name=\"cta\"></slot>\n </div>\n </div>\n );\n\n return (\n <Host>\n <div class={containerClasses}>\n {this.imagePosition === 'left' && renderImage()}\n {renderContent()}\n {this.imagePosition === 'right' && renderImage()}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,wrGAAwrG;;MC0CpsG,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAE7B;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAqB,MAAM;AAEhD;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAc,CAAC;AAE9B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAiE3C;IA/DC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;AAEhC,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,yBAAyB,EAAE,QAAQ;YACnC,wBAAwB,EAAE,CAAC,QAAQ;AACnC,YAAA,CAAC,uBAAuB,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,QAAQ;SACxD;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,qBAAqB,EAAE,IAAI;AAC3B,YAAA,CAAC,6BAA6B,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;SACpD;QAED,MAAM,WAAW,GAAG,MAAK;AACvB,YAAA,IAAI,CAAC,QAAQ;AAAE,gBAAA,OAAO,IAAI;AAE1B,YAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,+BAA+B,EAAA,EACxCA,OAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qBAAqB,EAC3B,CAAA,CACE;AAEV,SAAC;QAED,MAAM,aAAa,GAAG,OACpBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChCA,OAAA,CAAA,sBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,uBAAuB,EAAA,EAE7BA,OAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC3B,CACc,EAEvBA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,WAAW,EAAA,EACrBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5BA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACF,CACP;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EACzB,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,WAAW,EAAE,EAC9C,aAAa,EAAE,EACf,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,WAAW,EAAE,CAC5C,CACD;;;;;;;"}