@affinda/wc 0.0.15 → 0.0.16

package/dist/components/af-testimonial.js

@@ -1,6 +1,10 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$5 } from './p-DBnL9UHx.js';
+import { d as defineCustomElement$4 } from './p-BXZ7aJQf.js';
+import { d as defineCustomElement$3 } from './p-JepBVz99.js';
+import { d as defineCustomElement$2 } from './p-DOkvrcIE.js';
 
-const afTestimonialCss = ".sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;display:flex;height:544px;box-sizing:border-box}.testimonial-image.sc-af-testimonial{position:relative;width:519px;height:100%;background:#000000;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.testimonial-bg-image.sc-af-testimonial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.7}.testimonial-logo.sc-af-testimonial{position:relative;z-index:1;padding:0 108px;max-width:100%}.testimonial-logo.sc-af-testimonial img.sc-af-testimonial{width:100%;height:auto;display:block}.testimonial-content.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:32px;padding:48px;border:1px solid rgba(255, 255, 255, 0.08);border-left:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--colour-brand-inkwell, #14343b);flex-shrink:0}.testimonial-text.sc-af-testimonial{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:22px;font-weight:400;line-height:1.4;color:var(--colour-typography-body-default, #2b484f);margin:0;max-height:155px;overflow:hidden;text-overflow:ellipsis}.testimonial-attribution.sc-af-testimonial{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:22px;font-weight:400;line-height:1.4;color:var(--colour-typography-body-dark, #14343b);margin:0}.testimonial-stats.sc-af-testimonial{display:flex;gap:32px;width:100%}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--colour-background-border-default, #d1ddda);padding-top:32px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-cta.sc-af-testimonial{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid var(--colour-brand-inkwell, #14343b);border-radius:9999px;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:17px;font-weight:500;line-height:20px;color:var(--colour-brand-inkwell, #14343b);text-decoration:none;cursor:pointer;transition:all 0.2s ease}.testimonial-cta.sc-af-testimonial:hover{background:var(--colour-background-level-1, #e8eeed);transform:translateY(-1px)}.testimonial-cta.sc-af-testimonial svg.sc-af-testimonial{width:24px;height:24px}";
+const afTestimonialCss = ".sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;display:flex;height:544px;box-sizing:border-box}.testimonial-image.sc-af-testimonial{position:relative;width:40.5%;min-width:300px;max-width:519px;height:100%;background:var(--colour-brand-inkwell, #14343b);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.testimonial-bg-image.sc-af-testimonial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.7}.testimonial-logo.sc-af-testimonial{position:relative;z-index:1;padding:0 108px;max-width:100%}.testimonial-logo.sc-af-testimonial img.sc-af-testimonial{width:100%;height:auto;display:block}.testimonial-content.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:32px;padding:48px;border:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));border-left:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));flex-shrink:0}.testimonial-text.sc-af-testimonial{max-height:155px;overflow:hidden;text-overflow:ellipsis}.testimonial-attribution.sc-af-testimonial{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b))}.testimonial-stats.sc-af-testimonial{display:flex;gap:32px;width:100%;flex-shrink:0}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));padding-top:32px;flex-shrink:0;min-height:48px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-nav-buttons.sc-af-testimonial{display:flex;gap:12px}";
 
 const AfTestimonial$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonial extends H {
     constructor(registerHost) {
@@ -8,9 +12,33 @@ const AfTestimonial$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonial ext
         if (registerHost !== false) {
             this.__registerHost();
         }
+        this.navPrev = createEvent(this, "navPrev");
+        this.navNext = createEvent(this, "navNext");
+        /**
+         * Whether to show built-in navigation buttons (used when in a carousel)
+         */
+        this.showNavigation = false;
+        /**
+         * Whether the previous button is enabled
+         */
+        this.hasPrev = false;
+        /**
+         * Whether the next button is enabled
+         */
+        this.hasNext = false;
+        this.handlePrev = () => {
+            this.navPrev.emit();
+        };
+        this.handleNext = () => {
+            this.navNext.emit();
+        };
     }
     render() {
-        return (h(Host, { key: 'f913887a6afa873c7a3c36101270881bf66fbd62' }, h("div", { key: 'bf6f8f9f769a0086534a51f31bf605310ba96fcc', class: "testimonial-card" }, h("div", { key: '10101d05e22d08dacd8a55de8276a5b0bb582b65', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'f323a77de1dc85bd9ed8385a6dbefd65081c3afb', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '4fbd29c40e30700ba994372418f6c2be672124eb', class: "testimonial-logo" }, h("img", { key: '20871205ac3472a73e597737c9d0b72dc17f347e', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'b1e0702b8a274fc877eadc2ea951915225d0580d', class: "testimonial-content" }, h("div", { key: '978370df3c32658a253bc60a7cbed9488835b35f', class: "testimonial-quote-section" }, h("div", { key: 'e7dafdb960d1807c5451b7e836e18356f3d7f405', class: "testimonial-quote-icon" }, h("slot", { key: '20bc41c1ac125003cbcbb46b3ae5b01b019ea132', name: "quote-icon" }, h("svg", { key: '16131a28d752b5c376d7ecbdc10578c2a06f9b2d', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1b7a826418d6a2bd739061b7f9da2d7f70f55630', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: '78e6829551712546f6c71245c9609eff3cc123bf', class: "testimonial-text" }, this.quote), h("p", { key: '2339374f5fe07cf2d5b2fb56978c1a1516c4fe92', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '72fd3dd7dbfee193916b3c7d3acaf03a7540bf2d', class: "testimonial-stats" }, h("slot", { key: '531f04e6dcdfbfb3acde67955561b175cdf3a00d', name: "stats" })), h("div", { key: 'b7caadc3a9de19fea9f5556e5c74c24a726c467f', class: "testimonial-footer" }, h("div", { key: 'c5160dcf171ca997e29346a2cbb0978a1bc88161', class: "testimonial-nav" }, h("slot", { key: 'bc85749aed00c9b9acc870a20b2ccf634fc34af8', name: "navigation" })), this.readMoreLink && (h("a", { key: '3e968d6ad981ad0d0dc8b3c47e5f64ff0374be74', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '14ca40ff2260d107a205623549839ede3212a6f4' }, "Read full story"), h("svg", { key: 'eb0d55ed8d4219efbee4c0125be4420bf5b23393', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '5ccafb8ab0b5af8050cb7a60a02667f3c0b92cb1', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
+        return (h(Host, { key: 'aa2ad6cdbcba23aac44ba04c80928c0f83a50903' }, h("div", { key: 'e9417c5451eb5c7118760b8b06b97a3debbb49af', class: "testimonial-card" }, h("div", { key: '14f69eda1e3a21202014d9ff92fb7898d4cd6250', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '6447edb4eb0e7d1dd05432038f717820b6053cae', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'd052c5613090c21d7eeed60dba77bcb3dbfbc21a', class: "testimonial-logo" }, h("img", { key: 'f8be04a27d969dffd59cf9bad3bd9bbc9ddeb1d3', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '25d578ea0f78abacdd42bf9edbcf925680069da5', class: "testimonial-content" }, h("div", { key: '92458d4319c9f311bbcb296a6422f63b5c90aae6', class: "testimonial-quote-section" }, h("div", { key: '9f0e3dd17d27211afb49b8257ce896bd63490825', class: "testimonial-quote-icon" }, h("slot", { key: 'fee068be75df3e19436cca1e340ac7b4abdc9b6a', name: "quote-icon" }, h("af-icon", { key: '54416234954357aaaf49864515b87017f45aa09d', name: "quote", size: 48 }))), h("af-text", { key: '3a15866eb88613a956bfcbf107a9da0d51d59526', variant: "xlarge", class: "testimonial-text" }, this.quote), h("af-text", { key: '6c9a0dd1c16bbd8c76ca364bea329c2bf8ee0425', variant: "xlarge", class: "testimonial-attribution" }, this.attribution)), h("div", { key: '866aeb8fa8338d23354d5f4b7be63c5d9c0eaacb', class: "testimonial-stats" }, h("slot", { key: 'f7b559060fb9f9bbba39c2a67c23204d7cbf8bdd', name: "stats" })), h("div", { key: 'b19ad4b37a3ba6c85846732f991870e8312ef1d5', class: "testimonial-footer" }, h("div", { key: 'b1f64564c4dbd14347e32d782874be699d0745b0', class: "testimonial-nav" }, this.showNavigation ? (
+        // Render built-in navigation buttons
+        h("div", { class: "testimonial-nav-buttons" }, h("af-icon-button", { variant: "secondary", disabled: !this.hasPrev, onClick: this.handlePrev, ariaLabel: "Previous testimonial" }, h("af-icon", { name: "arrow-left", size: 24 })), h("af-icon-button", { variant: "secondary", disabled: !this.hasNext, onClick: this.handleNext, ariaLabel: "Next testimonial" }, h("af-icon", { name: "arrow-right", size: 24 })))) : (
+        // Allow custom navigation via slot
+        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '41adc9217b698b1df0f6075f5aa4ee0c2683632f', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: '3cec7eb5a8514427a257cc6f228e1e5bde2cc713', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
     }
     static get style() { return afTestimonialCss; }
 }, [262, "af-testimonial", {
@@ -18,19 +46,42 @@ const AfTestimonial$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonial ext
         "logoImage": [1, "logo-image"],
         "quote": [1],
         "attribution": [1],
-        "readMoreLink": [1, "read-more-link"]
+        "readMoreLink": [1, "read-more-link"],
+        "showNavigation": [1028, "show-navigation"],
+        "hasPrev": [1028, "has-prev"],
+        "hasNext": [1028, "has-next"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["af-testimonial"];
+    const components = ["af-testimonial", "af-button", "af-icon", "af-icon-button", "af-text"];
     components.forEach(tagName => { switch (tagName) {
         case "af-testimonial":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, AfTestimonial$1);
             }
             break;
+        case "af-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "af-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "af-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "af-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

package/dist/components/af-testimonial.js.map

@@ -1 +1 @@
-{"file":"af-testimonial.js","mappings":"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","names":["AfTestimonial","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.testimonial-card {\n  background: var(--colour-background-level-1, #e8eeed);\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  display: flex;\n  height: 544px;\n  box-sizing: border-box;\n}\n\n/* Image side - 519px wide */\n.testimonial-image {\n  position: relative;\n  width: 519px;\n  height: 100%;\n  background: #000000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.testimonial-bg-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  opacity: 0.7;\n}\n\n.testimonial-logo {\n  position: relative;\n  z-index: 1;\n  padding: 0 108px;\n  max-width: 100%;\n}\n\n.testimonial-logo img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n/* Content side */\n.testimonial-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n  padding: 48px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-left: 1px solid rgba(255, 255, 255, 0.08);\n  box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.testimonial-quote-icon {\n  width: 48px;\n  height: 48px;\n  color: var(--colour-brand-inkwell, #14343b);\n  flex-shrink: 0;\n}\n\n.testimonial-text {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 22px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--colour-typography-body-default, #2b484f);\n  margin: 0;\n  max-height: 155px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.testimonial-attribution {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 22px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--colour-typography-body-dark, #14343b);\n  margin: 0;\n}\n\n.testimonial-stats {\n  display: flex;\n  gap: 32px;\n  width: 100%;\n}\n\n.testimonial-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid var(--colour-background-border-default, #d1ddda);\n  padding-top: 32px;\n}\n\n.testimonial-nav {\n  display: flex;\n  gap: 12px;\n}\n\n.testimonial-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n  border-radius: 9999px;\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 17px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--colour-brand-inkwell, #14343b);\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.testimonial-cta:hover {\n  background: var(--colour-background-level-1, #e8eeed);\n  transform: translateY(-1px);\n}\n\n.testimonial-cta svg {\n  width: 24px;\n  height: 24px;\n}\n\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial',\n  styleUrl: 'af-testimonial.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonial {\n  /**\n   * Background image URL for the testimonial card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Company logo URL\n   */\n  @Prop() logoImage?: string;\n\n  /**\n   * Testimonial quote text\n   */\n  @Prop() quote!: string;\n\n  /**\n   * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n   */\n  @Prop() attribution!: string;\n\n  /**\n   * Link to full case study\n   */\n  @Prop() readMoreLink?: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-card\">\n          {/* Image side */}\n          <div class=\"testimonial-image\">\n            {this.backgroundImage && (\n              <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n            )}\n            {this.logoImage && (\n              <div class=\"testimonial-logo\">\n                <img src={this.logoImage} alt=\"Company logo\" />\n              </div>\n            )}\n          </div>\n\n          {/* Content side */}\n          <div class=\"testimonial-content\">\n            <div class=\"testimonial-quote-section\">\n              {/* Quote icon - using slot for flexibility */}\n              <div class=\"testimonial-quote-icon\">\n                <slot name=\"quote-icon\">\n                  <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z\" fill=\"currentColor\"/>\n                  </svg>\n                </slot>\n              </div>\n\n              <p class=\"testimonial-text\">{this.quote}</p>\n              <p class=\"testimonial-attribution\">{this.attribution}</p>\n            </div>\n\n            {/* Statistics slot */}\n            <div class=\"testimonial-stats\">\n              <slot name=\"stats\"></slot>\n            </div>\n\n            {/* Footer with navigation and CTA */}\n            <div class=\"testimonial-footer\">\n              <div class=\"testimonial-nav\">\n                <slot name=\"navigation\"></slot>\n              </div>\n              {this.readMoreLink && (\n                <a href={this.readMoreLink} class=\"testimonial-cta\">\n                  <span>Read full story</span>\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                    <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"version":3}
+{"file":"af-testimonial.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,gkEAAgkE;;MCQ5kEA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAgCE;;AAEG;AACsB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAExD;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAYzC,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AA+EF;IA7EC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAE3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC3B,IAAI,CAAC,eAAe,KACnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,sBAAsB,GAAG,CACvE,EACA,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAC,cAAc,EAAA,CAAG,CAC3C,CACP,CACG,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAEpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAA,EACrB,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CAC7B,CACH,EAGN,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAW,EAEzE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,yBAAyB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAW,CAClF,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,cAAc;;QAElB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,gBAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAC,sBAAsB,EAAA,EAEhC,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAE,EAAE,GAAI,CACxB,EACjB,CAAA,CAAA,gBAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAC,kBAAkB,EAAA,EAE5B,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,CACzB,CACb;;AAGN,QAAA,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAChC,CACG,EACL,IAAI,CAAC,YAAY,KAChB,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAA,qBAEpD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,CAChD,CACb,CACG,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfTestimonial","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.testimonial-card {\n  /* Uses themed level-1 background from parent Section */\n  background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  display: flex;\n  height: 544px;\n  box-sizing: border-box;\n}\n\n/* Image side - 40.5% of card width (519px of 1280px in Figma) */\n.testimonial-image {\n  position: relative;\n  width: 40.5%;\n  min-width: 300px;\n  /* Minimum for readability */\n  max-width: 519px;\n  /* Cap at Figma design width */\n  height: 100%;\n  /* Dark background for image overlay effect - always dark regardless of theme */\n  background: var(--colour-brand-inkwell, #14343b);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.testimonial-bg-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  opacity: 0.7;\n}\n\n.testimonial-logo {\n  position: relative;\n  z-index: 1;\n  padding: 0 108px;\n  max-width: 100%;\n}\n\n.testimonial-logo img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n/* Content side */\n.testimonial-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n  padding: 48px;\n  /* Subtle border using themed border token */\n  border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n  border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n  box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  /* Allow flex item to shrink */\n  overflow: hidden;\n}\n\n.testimonial-quote-icon {\n  width: 48px;\n  height: 48px;\n  /* Quote icon uses themed secondary heading color (gold/ochre accent) */\n  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n  flex-shrink: 0;\n}\n\n/* Quote text - layout only, typography comes from af-text */\n.testimonial-text {\n  max-height: 155px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Attribution uses body-dark color for emphasis */\n.testimonial-attribution {\n  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n}\n\n.testimonial-stats {\n  display: flex;\n  gap: 32px;\n  width: 100%;\n  flex-shrink: 0;\n}\n\n.testimonial-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  /* Themed border color */\n  border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));\n  padding-top: 32px;\n  flex-shrink: 0;\n  min-height: 48px;\n}\n\n.testimonial-nav {\n  display: flex;\n  gap: 12px;\n}\n\n.testimonial-nav-buttons {\n  display: flex;\n  gap: 12px;\n}\n\n/* CTA button is now handled by af-button atom component */","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial',\n  styleUrl: 'af-testimonial.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonial {\n  /**\n   * Background image URL for the testimonial card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Company logo URL\n   */\n  @Prop() logoImage?: string;\n\n  /**\n   * Testimonial quote text\n   */\n  @Prop() quote!: string;\n\n  /**\n   * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n   */\n  @Prop() attribution!: string;\n\n  /**\n   * Link to full case study\n   */\n  @Prop() readMoreLink?: string;\n\n  /**\n   * Whether to show built-in navigation buttons (used when in a carousel)\n   */\n  @Prop({ mutable: true }) showNavigation: boolean = false;\n\n  /**\n   * Whether the previous button is enabled\n   */\n  @Prop({ mutable: true }) hasPrev: boolean = false;\n\n  /**\n   * Whether the next button is enabled\n   */\n  @Prop({ mutable: true }) hasNext: boolean = false;\n\n  /**\n   * Emitted when the previous button is clicked\n   */\n  @Event() navPrev!: EventEmitter<void>;\n\n  /**\n   * Emitted when the next button is clicked\n   */\n  @Event() navNext!: EventEmitter<void>;\n\n  private handlePrev = () => {\n    this.navPrev.emit();\n  };\n\n  private handleNext = () => {\n    this.navNext.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-card\">\n          {/* Image side */}\n          <div class=\"testimonial-image\">\n            {this.backgroundImage && (\n              <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n            )}\n            {this.logoImage && (\n              <div class=\"testimonial-logo\">\n                <img src={this.logoImage} alt=\"Company logo\" />\n              </div>\n            )}\n          </div>\n\n          {/* Content side */}\n          <div class=\"testimonial-content\">\n            <div class=\"testimonial-quote-section\">\n              {/* Quote icon - using af-icon atom with slot for flexibility */}\n              <div class=\"testimonial-quote-icon\">\n                <slot name=\"quote-icon\">\n                  <af-icon name=\"quote\" size={48} />\n                </slot>\n              </div>\n\n              {/* Quote text - using af-text atom for proper theming */}\n              <af-text variant=\"xlarge\" class=\"testimonial-text\">{this.quote}</af-text>\n              {/* Attribution - using af-text atom with dark variant styling */}\n              <af-text variant=\"xlarge\" class=\"testimonial-attribution\">{this.attribution}</af-text>\n            </div>\n\n            {/* Statistics slot */}\n            <div class=\"testimonial-stats\">\n              <slot name=\"stats\"></slot>\n            </div>\n\n            {/* Footer with navigation and CTA */}\n            <div class=\"testimonial-footer\">\n              <div class=\"testimonial-nav\">\n                {this.showNavigation ? (\n                  // Render built-in navigation buttons\n                  <div class=\"testimonial-nav-buttons\">\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasPrev}\n                      onClick={this.handlePrev}\n                      ariaLabel=\"Previous testimonial\"\n                    >\n                      <af-icon name=\"arrow-left\" size={24} />\n                    </af-icon-button>\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasNext}\n                      onClick={this.handleNext}\n                      ariaLabel=\"Next testimonial\"\n                    >\n                      <af-icon name=\"arrow-right\" size={24} />\n                    </af-icon-button>\n                  </div>\n                ) : (\n                  // Allow custom navigation via slot\n                  <slot name=\"navigation\"></slot>\n                )}\n              </div>\n              {this.readMoreLink && (\n                <af-button variant=\"secondary\" href={this.readMoreLink}>\n                  Read full story\n                  <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n                </af-button>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"version":3}

package/dist/components/af-text-image-nest.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfTextImageNest extends Components.AfTextImageNest, HTMLElement {}
+export const AfTextImageNest: {
+    prototype: AfTextImageNest;
+    new (): AfTextImageNest;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-text-image-nest.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+
+const afTextImageNestCss = ".sc-af-text-image-nest-h{display:block;width:100%}.text-image-nest.sc-af-text-image-nest{width:100%;position:relative}.nest__content.sc-af-text-image-nest{display:flex;flex-direction:column;align-items:center;gap:48px}.nest__grid.sc-af-text-image-nest{display:grid;gap:40px;width:100%}.grid-single.sc-af-text-image-nest{grid-template-columns:1fr}.grid-grid-2.sc-af-text-image-nest{grid-template-columns:repeat(2, 1fr)}.grid-grid-3.sc-af-text-image-nest{grid-template-columns:repeat(3, 1fr)}.grid-grid-4.sc-af-text-image-nest{grid-template-columns:repeat(4, 1fr)}.grid-stacked.sc-af-text-image-nest{grid-template-columns:1fr;gap:48px}.nest__footer.sc-af-text-image-nest{display:flex;justify-content:center;gap:12px}.nest__footer.sc-af-text-image-nest:empty{display:none}@media (max-width: 768px){.nest__content.sc-af-text-image-nest{gap:32px}.nest__grid.sc-af-text-image-nest{grid-template-columns:1fr;gap:32px}.grid-stacked.sc-af-text-image-nest{gap:40px}.nest__footer.sc-af-text-image-nest{flex-direction:column;align-items:center}}.sc-af-text-image-nest-s>*{margin:0}";
+
+const AfTextImageNest$1 = /*@__PURE__*/ proxyCustomElement(class AfTextImageNest extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Layout variant for the content grid
+         */
+        this.layout = 'grid-3';
+    }
+    render() {
+        const containerClasses = {
+            'text-image-nest': true,
+            [`layout-${this.layout}`]: true,
+        };
+        const gridClasses = {
+            'nest__grid': true,
+            [`grid-${this.layout}`]: true,
+        };
+        return (h(Host, { key: 'bad121a0f47a7711ea1586c316f3363dd5e252ba' }, h("div", { key: '43be16c007ea9b8c7baa75cb038a4bf154730980', class: containerClasses }, h("div", { key: 'da6148be4838273374c0c040b1bb3793f4d3472c', class: "nest__content" }, h("div", { key: 'bccad6fe0a18ccb503f740afc8862a99408f17d5', class: gridClasses }, h("slot", { key: 'b8707c094e88a7c6a09b8e8321ba8edc4d32eb2a' })), h("div", { key: 'bd902e59ee14c2e3d9e4a3bdceb3e9b1603929bb', class: "nest__footer" }, h("slot", { key: '96f63716916447a563125dae4073a0e472becfba', name: "buttons" }))))));
+    }
+    static get style() { return afTextImageNestCss; }
+}, [262, "af-text-image-nest", {
+        "layout": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-text-image-nest"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-text-image-nest":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfTextImageNest$1);
+            }
+            break;
+    } });
+}
+
+const AfTextImageNest = AfTextImageNest$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfTextImageNest, defineCustomElement };
+//# sourceMappingURL=af-text-image-nest.js.map
+
+//# sourceMappingURL=af-text-image-nest.js.map

package/dist/components/af-text-image-nest.js.map

@@ -0,0 +1 @@
+{"file":"af-text-image-nest.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,+iCAA+iC;;MCsB7jCA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAN5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAA0D,QAAQ;AA+BjF;IA7BC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,CAAC,UAAU,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,IAAI;SAChC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,IAAI;SAC9B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAExB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfTextImageNest","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-text-image-nest/af-text-image-nest.css?tag=af-text-image-nest&encapsulation=scoped","src/components/af-text-image-nest/af-text-image-nest.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Base Container\n   ========================================================================== */\n\n.text-image-nest {\n  width: 100%;\n  position: relative;\n}\n\n/* ==========================================================================\n   Content Layout\n   ========================================================================== */\n\n.nest__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 48px;\n}\n\n/* ==========================================================================\n   Content Grid\n   ========================================================================== */\n\n.nest__grid {\n  display: grid;\n  gap: 40px;\n  width: 100%;\n}\n\n/* Single layout - full width */\n.grid-single {\n  grid-template-columns: 1fr;\n}\n\n/* 2-column grid */\n.grid-grid-2 {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n/* 3-column grid */\n.grid-grid-3 {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n/* 4-column grid */\n.grid-grid-4 {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n/* Stacked layout - full width with larger gap for alternating rows */\n.grid-stacked {\n  grid-template-columns: 1fr;\n  gap: 48px;\n}\n\n/* ==========================================================================\n   Footer Buttons\n   ========================================================================== */\n\n.nest__footer {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n}\n\n.nest__footer:empty {\n  display: none;\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  /* Content gap */\n  .nest__content {\n    gap: 32px;\n  }\n\n  /* All grids collapse to single column on mobile */\n  .nest__grid {\n    grid-template-columns: 1fr;\n    gap: 32px;\n  }\n\n  /* Stacked layout gap on mobile */\n  .grid-stacked {\n    gap: 40px;\n  }\n\n  /* Footer buttons stack vertically on mobile */\n  .nest__footer {\n    flex-direction: column;\n    align-items: center;\n  }\n}\n\n/* ==========================================================================\n   Slot Content Styling\n   ========================================================================== */\n\n::slotted(*) {\n  margin: 0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * TextImageNest is a layout component that arranges multiple text-image content pieces\n * in various grid layouts with optional footer buttons.\n * \n * This component inherits theming from a parent Section or theme-providing container.\n * Wrap it in an af-section to apply themes.\n * \n * Supports multiple layout variants:\n * - `single`: Full-width single item (side-by-side image + text)\n * - `grid-2`: 2-column grid with stacked items\n * - `grid-3`: 3-column grid with stacked items\n * - `grid-4`: 4-column grid with stacked items\n * - `stacked`: Alternating rows of side-by-side content\n */\n@Component({\n  tag: 'af-text-image-nest',\n  styleUrl: 'af-text-image-nest.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTextImageNest {\n  /**\n   * Layout variant for the content grid\n   */\n  @Prop() layout: 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked' = 'grid-3';\n\n  render() {\n    const containerClasses = {\n      'text-image-nest': true,\n      [`layout-${this.layout}`]: true,\n    };\n\n    const gridClasses = {\n      'nest__grid': true,\n      [`grid-${this.layout}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"nest__content\">\n            {/* Content Grid */}\n            <div class={gridClasses}>\n              <slot></slot>\n            </div>\n\n            {/* Footer Buttons */}\n            <div class=\"nest__footer\">\n              <slot name=\"buttons\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/af-text-image.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfTextImage extends Components.AfTextImage, HTMLElement {}
+export const AfTextImage: {
+    prototype: AfTextImage;
+    new (): AfTextImage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-text-image.js

@@ -0,0 +1,94 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-xDRMXxWJ.js';
+
+const afTextImageCss = ".sc-af-text-image-h{display:block;width:100%}.text-image.sc-af-text-image{display:flex;width:100%}.text-image--side-by-side.sc-af-text-image{flex-direction:row;align-items:flex-start;gap:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image{flex-direction:row-reverse}.text-image--image-right.sc-af-text-image{flex-direction:row}.text-image--full-width.sc-af-text-image{flex-direction:column;gap:var(--space-8, 32px)}.text-image__content.sc-af-text-image{display:flex;flex-direction:column;gap:56px;flex:1;min-width:0}.text-image--proportion-1-3.sc-af-text-image .text-image__content.sc-af-text-image{flex:2}.text-image--proportion-1-4.sc-af-text-image .text-image__content.sc-af-text-image{flex:3}.text-image--proportion-100.sc-af-text-image .text-image__content.sc-af-text-image{flex:none;width:100%}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image{padding-right:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding-left:var(--space-8, 32px)}.text-image--full-width.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__lockup.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%}.text-image__copy.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);max-width:840px;width:100%}.text-image__heading.sc-af-text-image{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-3-desktop, 34px);line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, #14343B);white-space:pre-wrap}.text-image__heading.sc-af-text-image:empty{display:none}.text-image__description.sc-af-text-image{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, #2B484F);white-space:pre-wrap}.text-image__description.sc-af-text-image:empty{display:none}.text-image__buttons.sc-af-text-image{display:block}.text-image__buttons.sc-af-text-image:empty{display:none}.text-image__image-wrapper.sc-af-text-image{flex-shrink:0;overflow:hidden;border-radius:var(--radius-md, 12px)}.text-image--proportion-1-3.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-1-4.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-100.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{width:100%}@media (max-width: 768px){.text-image--side-by-side.sc-af-text-image{flex-direction:column;gap:var(--space-6, 24px)}.text-image--image-left.sc-af-text-image,.text-image--image-right.sc-af-text-image{flex-direction:column}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image,.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__content.sc-af-text-image,.text-image__image-wrapper.sc-af-text-image{flex:none !important;width:100%}.text-image__heading.sc-af-text-image{font-size:var(--font-size-heading-3-mobile, 25px)}.text-image--proportion-100.sc-af-text-image .text-image__description.sc-af-text-image{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.text-image--proportion-100.sc-af-text-image .text-image__lockup.sc-af-text-image{gap:var(--space-3, 12px)}.text-image--proportion-100.sc-af-text-image .text-image__copy.sc-af-text-image{gap:var(--space-3, 12px)}.text-image__image-wrapper.sc-af-text-image{border-radius:var(--radius-sm, 8px)}}.sc-af-text-image-s>*{margin:0}.sc-af-text-image-s>p{margin:0}";
+
+const AfTextImage$1 = /*@__PURE__*/ proxyCustomElement(class AfTextImage extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Position of the image relative to the text content
+         */
+        this.imagePosition = 'right';
+        /**
+         * Proportion of the image in the layout
+         * - '1/3': Image takes 1/3 of the width (text takes 2/3)
+         * - '1/4': Image takes 1/4 of the width (text takes 3/4)
+         * - '100%': Image takes full width below text
+         */
+        this.imageProportion = '1/3';
+        /**
+         * Image alt text for accessibility
+         */
+        this.alt = '';
+        /**
+         * Whether to show a second typography lockup section
+         */
+        this.showSecondLockup = false;
+    }
+    render() {
+        const isFullWidth = this.imageProportion === '100%';
+        const isImageLeft = this.imagePosition === 'left';
+        const containerClasses = {
+            'text-image': true,
+            'text-image--full-width': isFullWidth,
+            'text-image--side-by-side': !isFullWidth,
+            'text-image--image-left': isImageLeft && !isFullWidth,
+            'text-image--image-right': !isImageLeft && !isFullWidth,
+            [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,
+        };
+        const renderTypographyLockup = (isSecond = false) => {
+            const prefix = isSecond ? 'second-' : '';
+            return (h("div", { class: `text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}` }, h("div", { class: "text-image__copy" }, h("div", { class: "text-image__heading" }, h("slot", { name: isSecond ? 'second-heading' : undefined })), h("div", { class: "text-image__description" }, h("slot", { name: `${prefix}description` }))), h("div", { class: "text-image__buttons" }, h("slot", { name: `${prefix}buttons` }))));
+        };
+        const renderImage = () => {
+            if (!this.src)
+                return null;
+            return (h("div", { class: "text-image__image-wrapper" }, h("af-image", { src: this.src, alt: this.alt })));
+        };
+        // For full-width layout, text is always above image
+        if (isFullWidth) {
+            return (h(Host, null, h("div", { class: containerClasses }, h("div", { class: "text-image__content" }, renderTypographyLockup(), this.showSecondLockup && renderTypographyLockup(true)), renderImage())));
+        }
+        // For side-by-side layouts
+        const textContent = (h("div", { class: "text-image__content" }, renderTypographyLockup(), this.showSecondLockup && renderTypographyLockup(true)));
+        const imageContent = renderImage();
+        return (h(Host, null, h("div", { class: containerClasses }, isImageLeft ? ([imageContent, textContent]) : ([textContent, imageContent]))));
+    }
+    static get style() { return afTextImageCss; }
+}, [262, "af-text-image", {
+        "imagePosition": [1, "image-position"],
+        "imageProportion": [1, "image-proportion"],
+        "src": [1],
+        "alt": [1],
+        "showSecondLockup": [4, "show-second-lockup"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-text-image", "af-image"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-text-image":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfTextImage$1);
+            }
+            break;
+        case "af-image":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfTextImage = AfTextImage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfTextImage, defineCustomElement };
+//# sourceMappingURL=af-text-image.js.map
+
+//# sourceMappingURL=af-text-image.js.map

package/dist/components/af-text-image.js.map

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

package/dist/components/af-text.js

@@ -1,4 +1,4 @@
-import { A as AfText$1, d as defineCustomElement$1 } from './p-Bg7dSc4D.js';
+import { A as AfText$1, d as defineCustomElement$1 } from './p-DOkvrcIE.js';
 
 const AfText = AfText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfTextarea extends Components.AfTextarea, HTMLElement {}
+export const AfTextarea: {
+    prototype: AfTextarea;
+    new (): AfTextarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-textarea.js

@@ -0,0 +1,9 @@
+import { A as AfTextarea$1, d as defineCustomElement$1 } from './p-CZyCImor.js';
+
+const AfTextarea = AfTextarea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfTextarea, defineCustomElement };
+//# sourceMappingURL=af-textarea.js.map
+
+//# sourceMappingURL=af-textarea.js.map

package/dist/components/af-textarea.js.map

@@ -0,0 +1 @@
+{"file":"af-textarea.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-typography-lockup.js

@@ -1,4 +1,4 @@
-import { A as AfTypographyLockup$1, d as defineCustomElement$1 } from './p-LUt2VDjp.js';
+import { A as AfTypographyLockup$1, d as defineCustomElement$1 } from './p-BMp8QbY-.js';
 
 const AfTypographyLockup = AfTypographyLockup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-video-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfVideoContainer extends Components.AfVideoContainer, HTMLElement {}
+export const AfVideoContainer: {
+    prototype: AfVideoContainer;
+    new (): AfVideoContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-video-container.js

@@ -0,0 +1,70 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$3 } from './p-BHKA-yEm.js';
+import { d as defineCustomElement$2 } from './p-BXZ7aJQf.js';
+
+const afVideoContainerCss = ".sc-af-video-container-h{display:block;width:100%}.video-container.sc-af-video-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:var(--space-10, 40px)}.video-container__top.sc-af-video-container,.video-container__bottom.sc-af-video-container{width:100%;display:flex;flex-direction:column;align-items:center}.video-container__top.sc-af-video-container:empty,.video-container__bottom.sc-af-video-container:empty{display:none}.video-container__video.sc-af-video-container{width:100%;max-width:1024px}.video-container__thumbnail-wrapper.sc-af-video-container{position:absolute;inset:0;border-radius:var(--radii-video-crop, 16px);overflow:hidden;background-color:var(--colour-inkwell-400, #2b484f)}.video-container__thumbnail.sc-af-video-container{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}.video-container__play-button.sc-af-video-container{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;padding:24px;border-radius:var(--radii-button, 9999px);background-color:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));cursor:pointer;transition:background-color 0.2s ease;color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b))}.video-container__play-button.sc-af-video-container:hover{background-color:var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2))}.video-container__play-button.sc-af-video-container:focus-visible{outline:2px solid var(--colour-brand-ice, #a6fffb);outline-offset:2px}@media (max-width: 768px){.video-container.sc-af-video-container{gap:var(--space-8, 32px)}.video-container__play-button.sc-af-video-container{padding:12px}}";
+
+const AfVideoContainer$1 = /*@__PURE__*/ proxyCustomElement(class AfVideoContainer extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.playClick = createEvent(this, "playClick");
+        /** Video thumbnail image URL */
+        this.videoThumbnailUrl = '';
+        /** Video alt text for accessibility */
+        this.videoAlt = 'Video thumbnail';
+        /** Optional video URL for play button link */
+        this.videoUrl = '';
+        /**
+         * Handles play button click - emits event and optionally opens URL
+         */
+        this.handlePlayClick = () => {
+            const event = this.playClick.emit({ videoUrl: this.videoUrl });
+            // Only open URL if event wasn't prevented and URL exists
+            if (!event.defaultPrevented && this.videoUrl) {
+                window.open(this.videoUrl, '_blank');
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'b31355a1ccf3cc4f9655f9c78d16f70fb104a671' }, h("div", { key: 'ebd03ff2668174d400d3d09488030d38d1a25fe8', class: "video-container" }, h("div", { key: 'af32cf3f6fec012e95d35d4224daebdfd64917b5', class: "video-container__top" }, h("slot", { key: '0258f4b6a027b09ecefd4ff6c7f2a62db6075847', name: "top" })), h("div", { key: 'fb74dae0250cfdf22b8c5503cd993ac67894276e', class: "video-container__video" }, h("af-aspect-ratio", { key: '88445a4ae1125882d3dc8fffc83fb1f880857fae', ratio: "16:9" }, h("div", { key: 'd87f8d15036026b04330e23395f95ad8363d72a3', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'e1327574236c73cc6c5b5a7a820c3905d2307047', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'c278f6944c5d69fec242a8291655985a20a7896f', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: 'df9ca50c0938d8539c7a79fb6f5bceb6326ed96c', name: "play", size: 24 }))))), h("div", { key: '3e2ba7be65431315fd3996fdadfbc45acb1be76b', class: "video-container__bottom" }, h("slot", { key: '10d64457339942b3bde412a740a66bf9665e8033', name: "bottom" })))));
+    }
+    static get style() { return afVideoContainerCss; }
+}, [262, "af-video-container", {
+        "videoThumbnailUrl": [1, "video-thumbnail-url"],
+        "videoAlt": [1, "video-alt"],
+        "videoUrl": [1, "video-url"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-video-container", "af-aspect-ratio", "af-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-video-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfVideoContainer$1);
+            }
+            break;
+        case "af-aspect-ratio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "af-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfVideoContainer = AfVideoContainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfVideoContainer, defineCustomElement };
+//# sourceMappingURL=af-video-container.js.map
+
+//# sourceMappingURL=af-video-container.js.map

package/dist/components/af-video-container.js.map

@@ -0,0 +1 @@
+{"file":"af-video-container.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,ixDAAixD;;MC+BhyDA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAN7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQU,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAQ,CAAA,QAAA,GAAW,iBAAiB;;AAGpC,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAS7B;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;AAC7B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;YAG9D,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAC5C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;;AAExC,SAAC;AA4CF;IA1CC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAE1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAQ,CACpB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC5C,IAAI,CAAC,iBAAiB,KACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,MAAM,EAAA,CACd,CACH,EAED,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,EAClB,YAAA,EAAA,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAY,CAAA,CAClC,CACL,CACU,CACd,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfVideoContainer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-video-container/af-video-container.css?tag=af-video-container&encapsulation=scoped","src/components/af-video-container/af-video-container.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.video-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  gap: var(--space-10, 40px);\n}\n\n/* ==========================================================================\n   Top/Bottom Slots\n   These inherit theme colors from their position in the split-section\n   ========================================================================== */\n\n.video-container__top,\n.video-container__bottom {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Hide empty slots */\n.video-container__top:empty,\n.video-container__bottom:empty {\n  display: none;\n}\n\n/* ==========================================================================\n   Video Thumbnail Section\n   ========================================================================== */\n\n.video-container__video {\n  width: 100%;\n  max-width: 1024px;\n}\n\n.video-container__thumbnail-wrapper {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--radii-video-crop, 16px);\n  overflow: hidden;\n  background-color: var(--colour-inkwell-400, #2b484f);\n}\n\n.video-container__thumbnail {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  position: absolute;\n  inset: 0;\n}\n\n/* ==========================================================================\n   Play Button Overlay\n   ========================================================================== */\n\n.video-container__play-button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  border-radius: var(--radii-button, 9999px);\n  background-color: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.video-container__play-button:hover {\n  background-color: var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2));\n}\n\n.video-container__play-button:focus-visible {\n  outline: 2px solid var(--colour-brand-ice, #a6fffb);\n  outline-offset: 2px;\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .video-container {\n    gap: var(--space-8, 32px);\n  }\n\n  /* Smaller play button on mobile */\n  .video-container__play-button {\n    padding: 12px;\n  }\n}\n","import { Component, h, Host, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Video Container molecule component for showcasing video content.\n * \n * Uses slots for typography lockups above and below the video.\n * When used inside af-split-section, the top slot inherits the top theme\n * and the bottom slot inherits the bottom theme for correct colors.\n * \n * @example\n * ```html\n * <af-split-section top-theme=\"mist-green\" bottom-theme=\"white\">\n *   <af-video-container video-thumbnail-url=\"/path/to/thumbnail.jpg\">\n *     <af-typography-lockup slot=\"top\" text-alignment=\"center\" heading-size=\"2\">\n *       <af-heading level=\"2\">Watch our product demo</af-heading>\n *       <af-text slot=\"description\">See how Affinda transforms your workflow</af-text>\n *       <af-button slot=\"buttons\" variant=\"primary\">Get Started</af-button>\n *     </af-typography-lockup>\n *   </af-video-container>\n * </af-split-section>\n * ```\n * \n * @slot top - Content above the video (typically af-typography-lockup). Inherits top theme.\n * @slot bottom - Content below the video (typically af-typography-lockup). Inherits bottom theme.\n */\n@Component({\n  tag: 'af-video-container',\n  styleUrl: 'af-video-container.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfVideoContainer {\n  /** Video thumbnail image URL */\n  @Prop() videoThumbnailUrl: string = '';\n\n  /** Video alt text for accessibility */\n  @Prop() videoAlt: string = 'Video thumbnail';\n\n  /** Optional video URL for play button link */\n  @Prop() videoUrl: string = '';\n\n  /** \n   * Emitted when the play button is clicked.\n   * Use this to handle video playback (e.g., open modal, embed player).\n   * If videoUrl is set and no handler prevents default, opens URL in new tab.\n   */\n  @Event() playClick!: EventEmitter<{ videoUrl: string }>;\n\n  /**\n   * Handles play button click - emits event and optionally opens URL\n   */\n  private handlePlayClick = () => {\n    const event = this.playClick.emit({ videoUrl: this.videoUrl });\n    \n    // Only open URL if event wasn't prevented and URL exists\n    if (!event.defaultPrevented && this.videoUrl) {\n      window.open(this.videoUrl, '_blank');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"video-container\">\n          {/* Top slot - for typography lockup above video (inherits top theme) */}\n          <div class=\"video-container__top\">\n            <slot name=\"top\"></slot>\n          </div>\n\n          {/* Video thumbnail section */}\n          <div class=\"video-container__video\">\n            <af-aspect-ratio ratio=\"16:9\">\n              <div class=\"video-container__thumbnail-wrapper\">\n                {this.videoThumbnailUrl && (\n                  <img \n                    src={this.videoThumbnailUrl} \n                    alt={this.videoAlt}\n                    class=\"video-container__thumbnail\"\n                    loading=\"lazy\"\n                  />\n                )}\n                {/* Play button overlay */}\n                <button \n                  class=\"video-container__play-button\"\n                  onClick={this.handlePlayClick}\n                  aria-label=\"Play video\"\n                  type=\"button\"\n                >\n                  <af-icon name=\"play\" size={24}></af-icon>\n                </button>\n              </div>\n            </af-aspect-ratio>\n          </div>\n\n          {/* Bottom slot - for typography lockup below video (inherits bottom theme) */}\n          <div class=\"video-container__bottom\">\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/index.js

@@ -1,16 +1,27 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-Dt4Fpr3O.js';
-export { A as AfHeading } from './p-BTEblSAo.js';
-export { A as AfText } from './p-Bg7dSc4D.js';
-export { A as AfColorSwatch } from './p-BBivIwbE.js';
-export { A as AfContainer } from './p-BkEmrXbw.js';
-export { A as AfAspectRatio } from './p-PLXzXWgX.js';
-export { A as AfNavItem } from './p-BekWfVfB.js';
-export { A as AfNavbar } from './p-CgnBqOVh.js';
-export { A as AfLogo } from './p-CN_K2ni-.js';
-export { A as AfButton } from './p-BKGrl8ua.js';
-export { A as AfIconButton } from './p-DqOwXTsH.js';
-export { A as AfButtonGroup } from './p-DBFWSHR9.js';
-export { A as AfTypographyLockup } from './p-LUt2VDjp.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CxngDK-N.js';
+export { A as AfHeading } from './p-BRN73McC.js';
+export { A as AfText } from './p-DOkvrcIE.js';
+export { A as AfColorSwatch } from './p-6uEhsUaO.js';
+export { A as AfContainer } from './p-D3UZ60qM.js';
+export { A as AfAspectRatio } from './p-BHKA-yEm.js';
+export { A as AfNavItem } from './p-Bh4YP9vE.js';
+export { A as AfNavbar } from './p-_bQXTXUb.js';
+export { A as AfLogo } from './p-D99aXp3U.js';
+export { A as AfButton } from './p-DBnL9UHx.js';
+export { A as AfIconButton } from './p-JepBVz99.js';
+export { A as AfButtonGroup } from './p-ByHIHg3l.js';
+export { A as AfTypographyLockup } from './p-BMp8QbY-.js';
+export { A as AfCheckbox } from './p-Br0VERLB.js';
+export { A as AfRadio } from './p-C_M8AOaj.js';
+export { A as AfSwitch } from './p-DW5DrJlQ.js';
+export { A as AfFieldset } from './p-BRsO61_R.js';
+export { A as AfInput } from './p-DzkSL2bi.js';
+export { A as AfTextarea } from './p-CZyCImor.js';
+export { A as AfTag } from './p-Cqp0DdgH.js';
+export { A as AfTab } from './p-DhdRcSve.js';
+export { A as AfTabBar } from './p-l95vl6T1.js';
+export { A as AfFeatureCard } from './p-C0f6y_zg.js';
+export { A as AfIllustratedCard } from './p-CCAq3Zj6.js';
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/{p-BBivIwbE.js → p-6uEhsUaO.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, h } from './p-CxngDK-N.js';
 
 const afColorSwatchCss = ":host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}";
 
@@ -39,6 +39,6 @@ function defineCustomElement() {
 }
 
 export { AfColorSwatch as A, defineCustomElement as d };
-//# sourceMappingURL=p-BBivIwbE.js.map
+//# sourceMappingURL=p-6uEhsUaO.js.map
 
-//# sourceMappingURL=p-BBivIwbE.js.map
+//# sourceMappingURL=p-6uEhsUaO.js.map