@affinda/wc 0.0.28 → 0.2.0

package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js

@@ -94,7 +94,7 @@ export class AfTestimonialCarousel {
         return (this.currentIndex + 1) / this.testimonialCount;
     }
     render() {
-        return (h(Host, { key: 'eb9042ba8aa89a99b81f8f6b477b50e44f6ef747' }, h("div", { key: 'aeeab184ea0954c9be173c4cc0e18b9f840cbf4d', class: "testimonial-carousel" }, h("div", { key: '57e2d480f737af4e6edad66475d3394eb7d4f6d7', class: "testimonial-slides" }, h("slot", { key: '21167cf84f89dcecbc87f2d1010f6fcf77975ca1' })), this.testimonialCount > 1 && (h("div", { key: '3c3211d3d523a4cf8f9178294f3dba4b491a82dc', class: "testimonial-progress" }, h("af-progress-line", { key: '63013ffeb317f2365d27843611e4210a4baa4984', progress: this.getProgress() }))))));
+        return (h(Host, { key: '4e4c2220f56d641b152b642f43d028aa290c076e' }, h("div", { key: '0df236a362b8604e7a4c9d48e477bc2ca900a520', class: "testimonial-carousel" }, h("div", { key: '0aa27d9bcdba7244dbe7649d6babab1116651080', class: "testimonial-slides" }, h("slot", { key: 'eb31599bb95f0355e51265cdd0bb3e5ca23ac2fa' })), this.testimonialCount > 1 && (h("div", { key: 'cc1314e5bdacd0610d0b848ce0cf39b43df38adb', class: "testimonial-progress" }, h("af-progress-line", { key: '4882ca8fa8b283940cf7654d4497a02e29914675', progress: this.getProgress() }))))));
     }
     static get is() { return "af-testimonial-carousel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.js

@@ -7,7 +7,7 @@ export class AfTestimonialStat {
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: '3854dc5e24bdfdfc96ff889f65231ed765f1cb2a' }, h("div", { key: 'bde58050e26a65197cf0d3cdb1de385c00f4ea14', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '37fc274547ef0bc7ff3c9e539f88b996c496ad52', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '83519d54647b39ac39649b22f93f21039e047d63', variant: "medium", class: "stat-description" }, this.description))));
+        return (h(Host, { key: '555836fed68760965fadc4c2e2f159b9d303918a' }, h("div", { key: 'd98e8e344674b0260cac3e47be6434c0cc920bca', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: 'c8fa22df6f81e30b5dd5c10bd7c8c74f4aa33ea3', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '77421992735b6287dd061f791a0f17d16f639e5f', variant: "medium", class: "stat-description" }, this.description))));
     }
     static get is() { return "af-testimonial-stat"; }
     static get encapsulation() { return "scoped"; }

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

@@ -29,7 +29,7 @@ export class AfTextImageNest {
             'nest__grid': true,
             [`grid-${this.layout}`]: true,
         };
-        return (h(Host, { key: '016ac9532a42a1494490c49dcffa488f49d1d5c8' }, h("div", { key: '38e16d51c44d69323e0b66e51449564631cc9077', class: containerClasses }, h("div", { key: 'a4c596c73303dde115357b80ece979b1a383e6a8', class: "nest__content" }, h("div", { key: '8d097e97a0cf9149fc3f775b27010d6d6d6c50e4', class: gridClasses }, h("slot", { key: '25ae554ae7f9091e503f1692115e483e552c6170' })), h("div", { key: 'e6105ef43ed3438ee6cd7edc671fc627d60ffef0', class: "nest__footer" }, h("slot", { key: 'ede8c7fa69237042eea88a7d0ed54f3551764e68', name: "buttons" }))))));
+        return (h(Host, { key: 'f55d86894fb1bb10f9d93cab3bc8050bfcdc7224' }, h("div", { key: '57b4ec709278e0d0c7cd4b7b30d99beb21d954ad', class: containerClasses }, h("div", { key: '62f691c6a7e3ab8b166cbb0a1a17144a7857ce7b', class: "nest__content" }, h("div", { key: '5fa9223861becb07444a67db5541bae057b65744', class: gridClasses }, h("slot", { key: 'fd29c150a6399eba74ace37bdbc7fadbc9df626b' })), h("div", { key: '4b956265f2b9ec119d0965f8cc9a323bcd37e426', class: "nest__footer" }, h("slot", { key: '934747fcb6cc7103fa894f5a74a32e32154013a4', name: "buttons" }))))));
     }
     static get is() { return "af-text-image-nest"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-theme-override/af-theme-override.js

@@ -18,7 +18,7 @@ export class AfThemeOverride {
         this.theme = 'white';
     }
     render() {
-        return (h(Host, { key: '67765126b10a933cf927169cab2c88135f9b9c9d' }, h("div", { key: '00e00242c786f339f93c30005e1bbdc2eb5cdae6', class: `theme-override theme-${this.theme}` }, h("slot", { key: '19b1cfc18e8d8218a2bc0e04fb70b2e2e3a68121' }))));
+        return (h(Host, { key: '4bad1c421cf71e65fb64a21287a3e91ae0de171d' }, h("div", { key: '1c987ccbf6027aea445d12c87e478dfb8c248223', class: `theme-override theme-${this.theme}` }, h("slot", { key: 'c6083e7acb42da22d9fe0692fc7de501def3b33d' }))));
     }
     static get is() { return "af-theme-override"; }
     static get encapsulation() { return "scoped"; }
@@ -38,9 +38,15 @@ export class AfThemeOverride {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory'",
+                    "original": "Theme",
                     "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
-                    "references": {}
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

package/dist/collection/components/af-theme-override/af-theme-override.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-theme-override.js","sourceRoot":"","sources":["../../../src/components/af-theme-override/af-theme-override.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;GASG;AAOH,MAAM,OAAO,eAAe;IAN5B;QAOE;;;WAGG;QACK,UAAK,GAAqE,OAAO,CAAC;KAW3F;IATC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,KAAK,EAAE;gBAC9C,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Theme Override utility component.\n * Wraps content and applies an explicit theme, overriding any inherited theme\n * from parent containers like AfSection or AfCard.\n * \n * Unlike AfSection, this component does NOT apply a background color - \n * it only sets the CSS custom properties that child components consume.\n * \n * @slot - Content to be themed\n */\n@Component({\n  tag: 'af-theme-override',\n  styleUrl: 'af-theme-override.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfThemeOverride {\n  /** \n   * The theme to apply to child components.\n   * Overrides any inherited theme from parent containers.\n   */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n\n  render() {\n    return (\n      <Host>\n        <div class={`theme-override theme-${this.theme}`}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-theme-override.js","sourceRoot":"","sources":["../../../src/components/af-theme-override/af-theme-override.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;GASG;AAOH,MAAM,OAAO,eAAe;IAN5B;QAOE;;;WAGG;QACK,UAAK,GAAU,OAAO,CAAC;KAWhC;IATC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,KAAK,EAAE;gBAC9C,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/**\n * Theme Override utility component.\n * Wraps content and applies an explicit theme, overriding any inherited theme\n * from parent containers like AfSection or AfCard.\n * \n * Unlike AfSection, this component does NOT apply a background color - \n * it only sets the CSS custom properties that child components consume.\n * \n * @slot - Content to be themed\n */\n@Component({\n  tag: 'af-theme-override',\n  styleUrl: 'af-theme-override.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfThemeOverride {\n  /** \n   * The theme to apply to child components.\n   * Overrides any inherited theme from parent containers.\n   */\n  @Prop() theme: Theme = 'white';\n\n  render() {\n    return (\n      <Host>\n        <div class={`theme-override theme-${this.theme}`}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-typography-lockup/af-typography-lockup.css

@@ -29,16 +29,18 @@
   gap: var(--space-4, 16px);
 }
 
-/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */
+/* Heading 3 mobile, 4 desktop, 5 desktop, card desktop: 12px gap */
 .breakpoint-mobile.heading-3.lockup,
 .breakpoint-desktop.heading-4.lockup,
-.breakpoint-desktop.heading-5.lockup {
+.breakpoint-desktop.heading-5.lockup,
+.breakpoint-desktop.heading-card.lockup {
   gap: var(--space-3, 12px);
 }
 
-/* Heading 4 mobile, 5 mobile: 8px gap */
+/* Heading 4 mobile, 5 mobile, card mobile: 8px gap */
 .breakpoint-mobile.heading-4.lockup,
-.breakpoint-mobile.heading-5.lockup {
+.breakpoint-mobile.heading-5.lockup,
+.breakpoint-mobile.heading-card.lockup {
   gap: var(--space-2, 8px);
 }
 
@@ -110,16 +112,18 @@
   gap: var(--space-4, 16px);
 }
 
-/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */
+/* Heading 3 mobile, 4 desktop, 5 desktop, card desktop: 12px gap */
 .breakpoint-mobile.heading-3 .copy,
 .breakpoint-desktop.heading-4 .copy,
-.breakpoint-desktop.heading-5 .copy {
+.breakpoint-desktop.heading-5 .copy,
+.breakpoint-desktop.heading-card .copy {
   gap: var(--space-3, 12px);
 }
 
-/* Heading 4 mobile, 5 mobile: 8px gap */
+/* Heading 4 mobile, 5 mobile, card mobile: 8px gap */
 .breakpoint-mobile.heading-4 .copy,
-.breakpoint-mobile.heading-5 .copy {
+.breakpoint-mobile.heading-5 .copy,
+.breakpoint-mobile.heading-card .copy {
   gap: var(--space-2, 8px);
 }
 
@@ -150,18 +154,31 @@
   font-size: var(--font-size-heading-2-desktop, 44px);
 }
 
+/* Explicit px line-heights (38/30/24) for heading 3/4/5 replace the
+ * previous ratio-based values (1.1/1.2) — renders identically within a
+ * pixel but exposes a predictable token consumers can reference directly. */
 .breakpoint-desktop.heading-3 .heading {
   font-size: var(--font-size-heading-3-desktop, 34px);
+  line-height: var(--line-height-heading-3, 38px);
 }
 
 .breakpoint-desktop.heading-4 .heading {
   font-size: var(--font-size-heading-4-desktop, 24px);
-  line-height: var(--line-height-heading-relaxed, 1.2);
+  line-height: var(--line-height-heading-4, 30px);
 }
 
 .breakpoint-desktop.heading-5 .heading {
   font-size: var(--font-size-heading-5-desktop, 20px);
-  line-height: var(--line-height-heading-relaxed, 1.2);
+  line-height: var(--line-height-heading-5, 24px);
+}
+
+/* Card-title scale (22/20px): retires the bespoke heading sizes on
+ * diff-card h3, NumberedStepper title, and expert-insights related-card h3
+ * on the website. Sits between heading-4 (24px) and heading-5 (20px) at
+ * desktop, and between heading-4 and heading-5 (both 20px→18px) at mobile. */
+.breakpoint-desktop.heading-card .heading {
+  font-size: var(--font-size-heading-card-desktop, 22px);
+  line-height: var(--line-height-heading-card, 28px);
 }
 
 /* Mobile heading sizes */
@@ -187,6 +204,11 @@
   line-height: var(--line-height-heading-normal, 1.1);
 }
 
+.breakpoint-mobile.heading-card .heading {
+  font-size: var(--font-size-heading-card-mobile, 20px);
+  line-height: var(--line-height-heading-card, 28px);
+}
+
 /* Description/body text - default (body/large) */
 .description {
   font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
@@ -215,12 +237,14 @@
   color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));
 }
 
-/* Description text size variations - smaller for heading 3 mobile, 4, and 5 */
+/* Description text size variations - smaller for heading 3 mobile, 4, 5, and card */
 .breakpoint-mobile.heading-3 .description,
 .breakpoint-desktop.heading-4 .description,
 .breakpoint-mobile.heading-4 .description,
 .breakpoint-desktop.heading-5 .description,
-.breakpoint-mobile.heading-5 .description {
+.breakpoint-mobile.heading-5 .description,
+.breakpoint-desktop.heading-card .description,
+.breakpoint-mobile.heading-card .description {
   font-size: var(--font-size-body-medium, 16px);
   line-height: var(--line-height-body-medium, 24px);
 }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  * consistent spacing and alignment driven by the `headingSize` prop.
  *
  * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
- * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+ * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic
  * level (h1-h6) is whatever the consumer slots in as default content.
  * Keep them aligned by convention so assistive tech and search engines
  * see the right hierarchy:
@@ -14,18 +14,25 @@ import { h, Host } from "@stencil/core";
  *   headingSize=3 ↔ <h3>
  *   headingSize=4 ↔ <h4>
  *   headingSize=5 ↔ <h5>
+ *   headingSize="card" ↔ <h3> (card-title scale: 22/20px)
  *
  * When a design asks for a visually small H1 or a visually large H3,
  * pass the two independently — just do it deliberately, not by
  * accident. A console warning fires in dev mode if the slotted tag is
  * more than one level away from the prop.
+ *
+ * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)
+ * and targets card titles in dense grids (diff-card h3, NumberedStepper
+ * title, expert-insights related-card h3 on the marketing site). It sits
+ * between `4` and `5` in the type ladder.
  */
 export class AfTypographyLockup {
     constructor() {
         /**
-         * The heading size (1-5, where 1 is largest). Controls visual scale
+         * The heading size (1-5, or "card"; 1 is largest). Controls visual scale
          * only — pair with a matching <h1>-<h5> slotted element for correct
-         * document outline (see component docblock).
+         * document outline (see component docblock). The `card` variant sits
+         * between 4 and 5 at 22/20px and is meant for card titles.
          */
         this.headingSize = 2;
         /**
@@ -90,6 +97,11 @@ export class AfTypographyLockup {
             return;
         const slottedLevel = Number(heading.tagName.slice(1));
         const expected = this.headingSize;
+        // The `card` variant is a named scale (card-title), not a semantic level.
+        // Skip the numeric-proximity check entirely — convention is <h3>, but
+        // consumers may legitimately pair it with <h2>-<h4> depending on context.
+        if (expected === 'card')
+            return;
         if (Math.abs(slottedLevel - expected) > 1) {
             // eslint-disable-next-line no-console
             console.warn(`[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +
@@ -126,7 +138,7 @@ export class AfTypographyLockup {
             [`align-${effectiveButtonsAlignment}`]: true
         };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '9b31ef730abc5e33919d32480e260937ae450529' }, h("div", { key: '95d33308deeb9c5488a89ef7161322a25b2e348f', class: containerClasses }, h("div", { key: '78cff6a371d382a9ff69d06d25180efd667958ab', class: "copy", style: copyStyle }, h("div", { key: '963e6233660bbe45084f42a70e0a1d54236c514e', class: headingClasses, part: "heading" }, h("slot", { key: 'b0b90701b673581cc08be3f79dea8068a85050ab' })), h("div", { key: 'db4b15e80e9bbe683b425e3cc8e92a2fa00774e1', class: descriptionClasses, part: "body", hidden: !this.hasDescription }, h("slot", { key: 'd581dab0571d6e400be15fa6a285d0774f5dc978', name: "description", ref: (el) => (this.descriptionSlot = el) }))), h("div", { key: 'fb160cbfc354f41eefe600f295c3d86146eb6065', class: buttonsClasses, part: "buttons", hidden: !this.hasButtons }, h("slot", { key: 'a801bbb9ac25136b0073f68ab05ae7738d6079e5', name: "buttons", ref: (el) => (this.buttonsSlot = el) })))));
+        return (h(Host, { key: '1c25556c2117158964c3a72c80bb0453fdd871bc' }, h("div", { key: '817f5ee187f7c9fbd2c18fe4857ced5ebb46e871', class: containerClasses }, h("div", { key: 'eefc5dc2b46cd392b658b0698de9dbab9262808b', class: "copy", style: copyStyle }, h("div", { key: '454e5991fde5bc8f8cf26c3b2942601de263b374', class: headingClasses, part: "heading" }, h("slot", { key: 'd3c76e6730ccc5eb5c0deae5ae544b844d04bf3e' })), h("div", { key: '5b4d41b67bfcd2e72ced102c53f4fc840c226e9f', class: descriptionClasses, part: "body", hidden: !this.hasDescription }, h("slot", { key: 'eb9b013dbe5462d9171c90238b90878df936e954', name: "description", ref: (el) => (this.descriptionSlot = el) }))), h("div", { key: '105bf269969148e14449ee0dda6dd83f1714df97', class: buttonsClasses, part: "buttons", hidden: !this.hasButtons }, h("slot", { key: 'bbf519061574d79fdba1639894c34d70ee662f2b', name: "buttons", ref: (el) => (this.buttonsSlot = el) })))));
     }
     static get is() { return "af-typography-lockup"; }
     static get encapsulation() { return "shadow"; }
@@ -143,18 +155,24 @@ export class AfTypographyLockup {
     static get properties() {
         return {
             "headingSize": {
-                "type": "number",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "1 | 2 | 3 | 4 | 5",
-                    "resolved": "1 | 2 | 3 | 4 | 5",
-                    "references": {}
+                    "original": "HeadingSize",
+                    "resolved": "\"card\" | 1 | 2 | 3 | 4 | 5",
+                    "references": {
+                        "HeadingSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::HeadingSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The heading size (1-5, where 1 is largest). Controls visual scale\nonly \u2014 pair with a matching <h1>-<h5> slotted element for correct\ndocument outline (see component docblock)."
+                    "text": "The heading size (1-5, or \"card\"; 1 is largest). Controls visual scale\nonly \u2014 pair with a matching <h1>-<h5> slotted element for correct\ndocument outline (see component docblock). The `card` variant sits\nbetween 4 and 5 at 22/20px and is meant for card titles."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Host } from '@stencil/core';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n/**\n * Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n *\n * **Semantic vs visual:** `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n *\n *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)\n *   headingSize=2 ↔ <h2>\n *   headingSize=3 ↔ <h3>\n *   headingSize=4 ↔ <h4>\n *   headingSize=5 ↔ <h5>\n *\n * When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n */\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The heading size (1-5, where 1 is largest). Controls visual scale\n   * only — pair with a matching <h1>-<h5> slotted element for correct\n   * document outline (see component docblock).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment for the entire lockup (heading and description).\n   * Can be overridden individually with headingAlignment and descriptionAlignment.\n   */\n  @Prop() textAlignment: TextAlign = 'left';\n\n  /**\n   * Heading text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() headingAlignment?: TextAlign;\n\n  /**\n   * Description text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() descriptionAlignment?: TextAlign;\n\n  /**\n   * Button layout direction (horizontal or vertical stacking)\n   */\n  @Prop() buttonLayout: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Buttons position alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() buttonsAlignment?: TextAlign;\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  /**\n   * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n   * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n   * secondary colour (soft-clay on most themes).\n   * - `primary` (default) - uses `--af-typography-heading-primary`\n   * - `secondary` - uses `--af-typography-heading-secondary`\n   */\n  @Prop() headingColor: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Description colour variant. Same pattern as `headingColor`; useful for\n   * hero-style lockups where the description is rendered in the accent colour.\n   * - `default` (default) - uses `--af-typography-body-default`\n   * - `secondary` - uses `--af-typography-heading-secondary`\n   */\n  @Prop() descriptionColor: 'default' | 'secondary' = 'default';\n\n  /**\n   * Whether the consumer passed anything into the description / buttons\n   * slots. The CSS `:empty` selector can't help here — the `<slot>`\n   * element itself counts as a child, so the wrapper divs would always\n   * render as empty-but-visible lines of gap. Tracked on mount and on\n   * any `slotchange` so wrappers collapse cleanly when there's nothing\n   * to show.\n   */\n  @State() hasDescription: boolean = false;\n  @State() hasButtons: boolean = false;\n\n  private descriptionSlot?: HTMLSlotElement;\n  private buttonsSlot?: HTMLSlotElement;\n\n  componentDidLoad() {\n    this.syncSlotState();\n    this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n    this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n    // Dev-time check that the slotted semantic tag (h1-h6) is within one\n    // level of the visual headingSize. Pairs with the class-level docblock;\n    // silent in production unless the author explicitly turned on dev mode\n    // via `window.__AF_STRICT_HEADINGS__`.\n    if (typeof window === 'undefined') return;\n    const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n      .__AF_STRICT_HEADINGS__;\n    if (!strict) return;\n    const heading = Array.from(this.el.children).find(\n      (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n    );\n    if (!heading) return;\n    const slottedLevel = Number(heading.tagName.slice(1));\n    const expected = this.headingSize;\n    if (Math.abs(slottedLevel - expected) > 1) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n          `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n    this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n  }\n\n  private syncSlotState = () => {\n    this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n    this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n  };\n\n  render() {\n    const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n    const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n    const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`layout-${this.buttonLayout}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const headingClasses = {\n      'heading': true,\n      [`align-${effectiveHeadingAlignment}`]: true,\n      [`heading-color-${this.headingColor}`]: true\n    };\n\n    const descriptionClasses = {\n      'description': true,\n      [`align-${effectiveDescriptionAlignment}`]: true,\n      [`description-color-${this.descriptionColor}`]: true\n    };\n\n    const buttonsClasses = {\n      'buttons': true,\n      [`align-${effectiveButtonsAlignment}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"copy\" style={copyStyle}>\n            <div class={headingClasses} part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n              <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n            </div>\n          </div>\n          <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n            <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAMH,MAAM,OAAO,kBAAkB;IAL/B;QAQE;;;;;WAKG;QACK,gBAAW,GAAgB,CAAC,CAAC;QAErC;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;WAGG;QACK,kBAAa,GAAc,MAAM,CAAC;QAY1C;;WAEG;QACK,iBAAY,GAA8B,UAAU,CAAC;QAY7D;;;;;;WAMG;QACK,iBAAY,GAA4B,SAAS,CAAC;QAE1D;;;;;WAKG;QACK,qBAAgB,GAA4B,SAAS,CAAC;QAE9D;;;;;;;WAOG;QACM,mBAAc,GAAY,KAAK,CAAC;QAChC,eAAU,GAAY,KAAK,CAAC;QAyC7B,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;YAC/F,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACzF,CAAC,CAAC;KAoDH;IA3FC,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzE,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACrE,qEAAqE;QACrE,wEAAwE;QACxE,uEAAuE;QACvE,uCAAuC;QACvC,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAC1C,MAAM,MAAM,GAAI,MAA0D;aACvE,sBAAsB,CAAC;QAC1B,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAE,KAAqB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAC3F,CAAC;QACF,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;QAClC,0EAA0E;QAC1E,sEAAsE;QACtE,0EAA0E;QAC1E,IAAI,QAAQ,KAAK,MAAM;YAAE,OAAO;QAChC,IAAI,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1C,sCAAsC;YACtC,OAAO,CAAC,IAAI,CACV,uCAAuC,QAAQ,iBAAiB,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK;gBAChG,iBAAiB,QAAQ,6DAA6D,CACzF,CAAC;QACJ,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,eAAe,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5E,IAAI,CAAC,WAAW,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1E,CAAC;IAOD,MAAM;QACJ,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC;QAC9E,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,aAAa,CAAC;QACtF,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC;QAE9E,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,CAAC,SAAS,yBAAyB,EAAE,CAAC,EAAE,IAAI;YAC5C,CAAC,iBAAiB,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI;SAC7C,CAAC;QAEF,MAAM,kBAAkB,GAAG;YACzB,aAAa,EAAE,IAAI;YACnB,CAAC,SAAS,6BAA6B,EAAE,CAAC,EAAE,IAAI;YAChD,CAAC,qBAAqB,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI;SACrD,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,CAAC,SAAS,yBAAyB,EAAE,CAAC,EAAE,IAAI;SAC7C,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS;oBAChC,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS;wBACxC,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc;wBACtE,6DAAM,IAAI,EAAC,aAAa,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAqB,CAAC,GAAS,CACzF,CACF;gBACN,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS,EAAC,MAAM,EAAE,CAAC,IAAI,CAAC,UAAU;oBACjE,6DAAM,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAqB,CAAC,GAAS,CACjF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Host } from '@stencil/core';\nimport type { HeadingSize } from '../../types';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n/**\n * Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n *\n * **Semantic vs visual:** `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n *\n *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)\n *   headingSize=2 ↔ <h2>\n *   headingSize=3 ↔ <h3>\n *   headingSize=4 ↔ <h4>\n *   headingSize=5 ↔ <h5>\n *   headingSize=\"card\" ↔ <h3> (card-title scale: 22/20px)\n *\n * When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n *\n * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)\n * and targets card titles in dense grids (diff-card h3, NumberedStepper\n * title, expert-insights related-card h3 on the marketing site). It sits\n * between `4` and `5` in the type ladder.\n */\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The heading size (1-5, or \"card\"; 1 is largest). Controls visual scale\n   * only — pair with a matching <h1>-<h5> slotted element for correct\n   * document outline (see component docblock). The `card` variant sits\n   * between 4 and 5 at 22/20px and is meant for card titles.\n   */\n  @Prop() headingSize: HeadingSize = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment for the entire lockup (heading and description).\n   * Can be overridden individually with headingAlignment and descriptionAlignment.\n   */\n  @Prop() textAlignment: TextAlign = 'left';\n\n  /**\n   * Heading text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() headingAlignment?: TextAlign;\n\n  /**\n   * Description text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() descriptionAlignment?: TextAlign;\n\n  /**\n   * Button layout direction (horizontal or vertical stacking)\n   */\n  @Prop() buttonLayout: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Buttons position alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() buttonsAlignment?: TextAlign;\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  /**\n   * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n   * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n   * secondary colour (soft-clay on most themes).\n   * - `primary` (default) - uses `--af-typography-heading-primary`\n   * - `secondary` - uses `--af-typography-heading-secondary`\n   */\n  @Prop() headingColor: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Description colour variant. Same pattern as `headingColor`; useful for\n   * hero-style lockups where the description is rendered in the accent colour.\n   * - `default` (default) - uses `--af-typography-body-default`\n   * - `secondary` - uses `--af-typography-heading-secondary`\n   */\n  @Prop() descriptionColor: 'default' | 'secondary' = 'default';\n\n  /**\n   * Whether the consumer passed anything into the description / buttons\n   * slots. The CSS `:empty` selector can't help here — the `<slot>`\n   * element itself counts as a child, so the wrapper divs would always\n   * render as empty-but-visible lines of gap. Tracked on mount and on\n   * any `slotchange` so wrappers collapse cleanly when there's nothing\n   * to show.\n   */\n  @State() hasDescription: boolean = false;\n  @State() hasButtons: boolean = false;\n\n  private descriptionSlot?: HTMLSlotElement;\n  private buttonsSlot?: HTMLSlotElement;\n\n  componentDidLoad() {\n    this.syncSlotState();\n    this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n    this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n    // Dev-time check that the slotted semantic tag (h1-h6) is within one\n    // level of the visual headingSize. Pairs with the class-level docblock;\n    // silent in production unless the author explicitly turned on dev mode\n    // via `window.__AF_STRICT_HEADINGS__`.\n    if (typeof window === 'undefined') return;\n    const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n      .__AF_STRICT_HEADINGS__;\n    if (!strict) return;\n    const heading = Array.from(this.el.children).find(\n      (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n    );\n    if (!heading) return;\n    const slottedLevel = Number(heading.tagName.slice(1));\n    const expected = this.headingSize;\n    // The `card` variant is a named scale (card-title), not a semantic level.\n    // Skip the numeric-proximity check entirely — convention is <h3>, but\n    // consumers may legitimately pair it with <h2>-<h4> depending on context.\n    if (expected === 'card') return;\n    if (Math.abs(slottedLevel - expected) > 1) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n          `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n    this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n  }\n\n  private syncSlotState = () => {\n    this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n    this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n  };\n\n  render() {\n    const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n    const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n    const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`layout-${this.buttonLayout}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const headingClasses = {\n      'heading': true,\n      [`align-${effectiveHeadingAlignment}`]: true,\n      [`heading-color-${this.headingColor}`]: true\n    };\n\n    const descriptionClasses = {\n      'description': true,\n      [`align-${effectiveDescriptionAlignment}`]: true,\n      [`description-color-${this.descriptionColor}`]: true\n    };\n\n    const buttonsClasses = {\n      'buttons': true,\n      [`align-${effectiveButtonsAlignment}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"copy\" style={copyStyle}>\n            <div class={headingClasses} part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n              <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n            </div>\n          </div>\n          <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n            <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -42,7 +42,7 @@ export class AfVideoContainer {
         };
     }
     render() {
-        return (h(Host, { key: '805ef2cb5883f2589729c8f01a6912d9649931ed' }, h("div", { key: '0378ad7aa7ba09981fc87b8701e056cfd71c7ff2', class: "video-container" }, h("div", { key: '0d6581e16ee68472b37d1d7f5135f3ce5b6312a0', class: "video-container__top" }, h("slot", { key: '8802570242c658b176405ab1493254c4c3473d4a', name: "top" })), h("div", { key: 'ff73de6c3dc1597acbaf707dbfcb5559fde6ebdb', class: "video-container__video" }, h("af-aspect-ratio", { key: '092c02fe25891ef4436056056c1443bfe35631ab', ratio: "16:9" }, h("div", { key: '0e1def94ac6e243af93c67e13c1fb7d743eeb808', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: '9437d1ee258da0548225edd8f6f38f3ac1984e66', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: '0269c801acca11d95e383a9d588ba07b30fa28a2', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: '85ba1f8c72057d948ab6c06cdf76be075f81f9d7', name: "play", size: 24 }))))), h("div", { key: '4b50dd7066e2f0390052d0042d762f7e3d3beb1a', class: "video-container__bottom" }, h("slot", { key: 'ef00f995dc3e81e0197846d672701c829a8d61d1', name: "bottom" })))));
+        return (h(Host, { key: '2bef13cab427a55363cd89b0398bfb5187d33424' }, h("div", { key: 'ecd350d7cc04482a4e04fa0d22ff2b57a91374ad', class: "video-container" }, h("div", { key: 'd855f0cb2a805b9fff46008f360f8643f91e9a5e', class: "video-container__top" }, h("slot", { key: '87d02b710b110573e2ee3b177665ae6d277f1533', name: "top" })), h("div", { key: 'a9f263a746850568c487f84f889ff55ce8b68f56', class: "video-container__video" }, h("af-aspect-ratio", { key: 'f6473ffa87a633d101094bb4d34b85c9edf8d0fa', ratio: "16:9" }, h("div", { key: '042a90b134fa35101b56be745561fb729ac912d8', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: '4fc0ee51ac96f79b496a16d9a43004c2fa1111a9', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: '1dbe720ac679b9fac1405e1d7b28ae3f7c6bf234', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: '7d8db3173c20d105c7371765255a3046c9ee1b07', name: "play", size: 24 }))))), h("div", { key: 'f0da765eb52e956a8d77df2158e0e2fe984d672c', class: "video-container__bottom" }, h("slot", { key: '1cb4acc596c066f5ac1c9981d4aeab4c6a249072', name: "bottom" })))));
     }
     static get is() { return "af-video-container"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-visually-hidden/af-visually-hidden.js

@@ -15,7 +15,7 @@ export class AfVisuallyHidden {
         this.focusable = false;
     }
     render() {
-        return (h(Host, { key: '9ce559b8f54328432497181c2e8c7a4136ddd67d', class: { 'focusable': this.focusable } }, h("slot", { key: '4d877b02acf7b1ab61dca5e72b4d76c37a9fc7c2' })));
+        return (h(Host, { key: '7d0224d1f120153733e77b38281f8f9ebe9841b8', class: { 'focusable': this.focusable } }, h("slot", { key: '3a355db9347be885ba5c1b1bf1aa89ec4c4c1e06' })));
     }
     static get is() { return "af-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components.js

@@ -21,4 +21,5 @@ export { AfTab } from './components/af-tab/af-tab';
 export { AfTabBar } from './components/af-tab-bar/af-tab-bar';
 export { AfFeatureCard } from './components/af-feature-card/af-feature-card';
 export { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';
+export { AfHero } from './components/af-hero/af-hero';
 //# sourceMappingURL=components.js.map

package/dist/collection/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC","sourcesContent":["export { AfHeading } from './components/af-heading/af-heading';\nexport { AfText } from './components/af-text/af-text';\nexport { AfColorSwatch } from './components/af-color-swatch/af-color-swatch';\nexport { AfContainer } from './components/af-container/af-container';\nexport { AfAspectRatio } from './components/af-aspect-ratio/af-aspect-ratio';\nexport { AfNavItem } from './components/af-nav-item/af-nav-item';\nexport { AfNavbar } from './components/af-navbar/af-navbar';\nexport { AfLogo } from './components/af-logo/af-logo';\nexport { AfButton } from './components/af-button/af-button';\nexport { AfIconButton } from './components/af-icon-button/af-icon-button';\nexport { AfButtonGroup } from './components/af-button-group/af-button-group';\nexport { AfTypographyLockup } from './components/af-typography-lockup/af-typography-lockup';\nexport { AfCheckbox } from './components/af-checkbox/af-checkbox';\nexport { AfRadio } from './components/af-radio/af-radio';\nexport { AfSwitch } from './components/af-switch/af-switch';\nexport { AfFieldset } from './components/af-fieldset/af-fieldset';\nexport { AfInput } from './components/af-input/af-input';\nexport { AfTextarea } from './components/af-textarea/af-textarea';\nexport { AfTag } from './components/af-tag/af-tag';\nexport { AfTab } from './components/af-tab/af-tab';\nexport { AfTabBar } from './components/af-tab-bar/af-tab-bar';\nexport { AfFeatureCard } from './components/af-feature-card/af-feature-card';\nexport { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';\n"]}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AACzF,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["export { AfHeading } from './components/af-heading/af-heading';\nexport { AfText } from './components/af-text/af-text';\nexport { AfColorSwatch } from './components/af-color-swatch/af-color-swatch';\nexport { AfContainer } from './components/af-container/af-container';\nexport { AfAspectRatio } from './components/af-aspect-ratio/af-aspect-ratio';\nexport { AfNavItem } from './components/af-nav-item/af-nav-item';\nexport { AfNavbar } from './components/af-navbar/af-navbar';\nexport { AfLogo } from './components/af-logo/af-logo';\nexport { AfButton } from './components/af-button/af-button';\nexport { AfIconButton } from './components/af-icon-button/af-icon-button';\nexport { AfButtonGroup } from './components/af-button-group/af-button-group';\nexport { AfTypographyLockup } from './components/af-typography-lockup/af-typography-lockup';\nexport { AfCheckbox } from './components/af-checkbox/af-checkbox';\nexport { AfRadio } from './components/af-radio/af-radio';\nexport { AfSwitch } from './components/af-switch/af-switch';\nexport { AfFieldset } from './components/af-fieldset/af-fieldset';\nexport { AfInput } from './components/af-input/af-input';\nexport { AfTextarea } from './components/af-textarea/af-textarea';\nexport { AfTag } from './components/af-tag/af-tag';\nexport { AfTab } from './components/af-tab/af-tab';\nexport { AfTabBar } from './components/af-tab-bar/af-tab-bar';\nexport { AfFeatureCard } from './components/af-feature-card/af-feature-card';\nexport { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';\nexport { AfHero } from './components/af-hero/af-hero';\nexport type { HeroVariant, HeroTopPad } from './components/af-hero/af-hero';\n"]}

package/dist/collection/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG","sourcesContent":["/**\n * Shared prop-union types used across multiple @affinda/wc components.\n *\n * Before adding a new union here: check whether the value list is truly\n * shared across components, or whether it's specific to one. Component-\n * local unions (e.g. a 2-value `direction` prop) should stay local; only\n * lift types here when they're duplicated verbatim in 2+ places, or when\n * a semantic concept (theme, spacing scale) deserves a single source of\n * truth.\n */\n\n/**\n * Brand theme token. Drives background colour and theme-dependent child\n * styling (typography colour, button tokens, etc.) via a `theme-{name}`\n * class on the rendered wrapper.\n *\n * Canonical values: `'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory'`.\n *\n * Consumers: af-section, af-theme-override, af-feature-card,\n * af-illustrated-card, af-card, af-client-carousel, af-navbar,\n * af-in-page-banner, af-split-section.\n */\nexport type Theme =\n  | 'white'\n  | 'inkwell'\n  | 'mist-green'\n  | 'soft-clay'\n  | 'white-ivory';\n\n/**\n * Gap spacing token. Maps to `--space-{n}` CSS custom properties (space\n * scale: 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, 8=32px).\n *\n * Canonical values: `'1' | '2' | '3' | '4' | '5' | '6' | '8'`.\n *\n * Consumers: af-stack, af-grid, af-inline, af-divider (as part of its\n * `spacing` prop). Note: af-button-group uses `gap: string` (free-form\n * CSS length) and intentionally opts out of the token ladder.\n */\nexport type Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\n\n/**\n * Section padding variant. Drives top/bottom padding via `padding-{name}`\n * classes on the rendered wrapper.\n *\n * Canonical values: `'none' | 'tight' | 'default' | 'loose'`.\n *\n * Consumers: af-section, af-split-section.\n */\nexport type Padding = 'none' | 'tight' | 'default' | 'loose';\n\n/**\n * Typography heading size. Controls ONLY the visual scale of a heading\n * lockup; the semantic level (h1-h6) is determined by the slotted tag\n * the consumer passes in. See af-typography-lockup for the full\n * semantic-vs-visual convention.\n *\n * Canonical values: `1 | 2 | 3 | 4 | 5 | 'card'`.\n *\n * - `1`-`5` map to the type ladder (1 largest, 5 smallest).\n * - `'card'` is a named card-title scale (22/20px) that sits between\n *   `4` and `5`, used for card titles in dense grids.\n *\n * Consumers: af-typography-lockup.\n */\nexport type HeadingSize = 1 | 2 | 3 | 4 | 5 | 'card';\n"]}

package/dist/components/af-accordion-item.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DOgb6SUj.js';
 
 const afAccordionItemCss = ":host{display:block;width:100%}.accordion-item{width:100%}.trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;background:transparent;border:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed);cursor:pointer;font:inherit;text-align:left;color:var(--af-typography-body-dark, #14343b);transition:background-color 0.2s ease}.trigger:hover:not(:disabled){background-color:var(--af-background-base-hover, rgba(20, 52, 59, 0.02))}.trigger:focus-visible{outline:2px solid var(--af-background-border-active, #8a7049);outline-offset:-2px}.trigger:disabled{cursor:not-allowed;opacity:0.5}.trigger-content{flex:1;min-width:0}.chevron{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-typography-body-dark, #14343b);transition:transform 0.3s ease}.chevron.is-open{transform:rotate(180deg)}.content-wrapper{overflow:hidden;transition:max-height 0.3s ease}.content{padding:0}:host(.is-disabled) .trigger{cursor:not-allowed;opacity:0.5}:host(.is-disabled) .trigger:hover{background-color:transparent}:host(.is-open) .trigger{border-bottom-color:transparent}";
 
@@ -68,7 +68,7 @@ const AfAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class AfAccordionItem
         const contentStyle = {
             maxHeight: this.open ? `${this.contentHeight}px` : '0px'
         };
-        return (h(Host, { key: 'f09a5fe4d1ca9e14d674c5cb255c391355fba0b9', class: { 'is-open': this.open, 'is-disabled': this.disabled } }, h("div", { key: '2e53d4c8599acd81e7a624ac130add7ea7be3c86', class: "accordion-item" }, h("button", { key: 'c3b97ff90a37ac7f582b2ba086db0faa21328dc2', class: "trigger", onClick: this.handleTriggerClick, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { key: '48446eb132a44680630f46c1bd65921a440f688a', class: "trigger-content" }, h("slot", { key: 'a47fdf5a659602a340091544587be928c226a89b', name: "trigger" })), h("div", { key: '1c938183404f982ebcfe3ba0661f57e4ecf2c006', class: { 'chevron': true, 'is-open': this.open } }, h("svg", { key: '20d3ef9eb98b0cbb2f0af2165cc911fb3ec93bd5', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { key: '7477c118131ce91b79d1c9f74174c9431ee60dca', d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '676a89763218ddbd6daddb174a4eebecfffb6a94', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: 'fb0f8760497cf998daa0f1cd5c52c6349fb125e4', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '300f0b749dbaf06bb44ad9b176f3d9f64c52db6e' }))))));
+        return (h(Host, { key: '62ba3529b8f862d5e9ec88672e9452ce2fc6fcf5', class: { 'is-open': this.open, 'is-disabled': this.disabled } }, h("div", { key: '4bb13e5c6f26d3bf9fd65fb620fb8161396fb8df', class: "accordion-item" }, h("button", { key: 'c46022e2985db411428da2798e0f225f47031af1', class: "trigger", onClick: this.handleTriggerClick, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { key: 'b89f4babebfae4da95af856adf155308574e56a2', class: "trigger-content" }, h("slot", { key: '20ea8938675a12e2d3c71c341788abb0ceb1d236', name: "trigger" })), h("div", { key: '42414ee23bfba9bf5025a7637630a69cda22d0e3', class: { 'chevron': true, 'is-open': this.open } }, h("svg", { key: 'ed17cf43c888aba66a1b0e03b69af4ea65ed9c44', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { key: '0f095319bebcea25c313b2237c2c8bb693508efc', d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e6fef8f13b9282cc148cfe7d34739a1efefdadee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '745ff6e1e9d56c2fac10fa0c39a744791ad66c92', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '141ff050b84e081e9031d739b1b2015697cadff1' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/af-accordion.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DOgb6SUj.js';
 
 const afAccordionCss = ".sc-af-accordion-h{display:block;width:100%}.accordion.sc-af-accordion{display:flex;flex-direction:column;width:100%}.sc-af-accordion-s>af-accordion-item{display:block}.sc-af-accordion-s>af-accordion-item:last-child{--accordion-item-border:transparent}";
 
@@ -90,7 +90,7 @@ const AfAccordion$1 = /*@__PURE__*/ proxyCustomElement(class AfAccordion extends
         });
     }
     render() {
-        return (h(Host, { key: 'e0060977dd938771a54e2941a962a58bf18b61dd', class: { [`mode-${this.mode}`]: true } }, h("div", { key: 'dacacd23dc6f116bb8c856161d1a956c0fc7d70d', class: "accordion" }, h("slot", { key: '1dcc400fc416c79f0ac1cf48893de03c46e31741' }))));
+        return (h(Host, { key: '9b0b627ab9e4bc82ae52adb616ee430dd6451bdc', class: { [`mode-${this.mode}`]: true } }, h("div", { key: '9941d4fea3ddfcf8f5d64883347dceda215401ba', class: "accordion" }, h("slot", { key: '00db0154b54e87b3411541c361b5dca4f91e2015' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/af-aspect-ratio.js

@@ -1,4 +1,4 @@
-import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-DkaLi-uL.js';
+import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-CoL_hRAR.js';
 
 const AfAspectRatio = AfAspectRatio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-button-group.js

@@ -1,4 +1,4 @@
-import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-D30gSxh2.js';
+import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-kEqwmn80.js';
 
 const AfButtonGroup = AfButtonGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-button.js

@@ -1,4 +1,4 @@
-import { A as AfButton$1, d as defineCustomElement$1 } from './p-CNuja1ax.js';
+import { A as AfButton$1, d as defineCustomElement$1 } from './p--gChEc0P.js';
 
 const AfButton = AfButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-card.js

@@ -1,4 +1,4 @@
-import { A as AfCard$1, d as defineCustomElement$1 } from './p-BO4blShf.js';
+import { A as AfCard$1, d as defineCustomElement$1 } from './p-CJxqw006.js';
 
 const AfCard = AfCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-center.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
 const afCenterCss = ":host{display:flex;box-sizing:border-box}:host([hidden]){display:none}";
 
@@ -35,7 +35,7 @@ const AfCenter$1 = /*@__PURE__*/ proxyCustomElement(class AfCenter extends H {
         if (this.minHeight) {
             style.minHeight = this.minHeight;
         }
-        return (h(Host, { key: 'fc1bcaef9b11c0c5f69e9ef95d58adf61b4f244a', style: style }, h("slot", { key: '09dc75e0a80760d56e370ad0b52231f4143549e8' })));
+        return (h(Host, { key: '0b93a207374e7665f06187ae2f8837f251ea1312', style: style }, h("slot", { key: 'c5d0fb0f3a37effb8e8cd466bd13d86c88958229' })));
     }
     static get style() { return afCenterCss; }
 }, [257, "af-center", {

package/dist/components/af-checkbox.js

@@ -1,4 +1,4 @@
-import { A as AfCheckbox$1, d as defineCustomElement$1 } from './p-Dxa6cHAb.js';
+import { A as AfCheckbox$1, d as defineCustomElement$1 } from './p-DbVc-b1e.js';
 
 const AfCheckbox = AfCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-client-carousel.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
-const afClientCarouselCss = ".sc-af-client-carousel-h{display:block;width:100%}.client-carousel.sc-af-client-carousel{padding:48px 0;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden}.carousel-container.sc-af-client-carousel{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%;overflow:hidden}.carousel-row.sc-af-client-carousel{display:flex;width:100%;overflow:hidden;position:relative}.logo-track.sc-af-client-carousel{display:flex;gap:var(--space-4, 16px);animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-left;animation-duration:40s}.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-right;animation-duration:40s}.sc-af-client-carousel-h:hover .logo-track.sc-af-client-carousel{animation-play-state:paused}@media (prefers-reduced-motion: reduce){.logo-track.sc-af-client-carousel,.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel,.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;transform:translateX(0)}}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}.logo-track.sc-af-client-carousel>*.sc-af-client-carousel{display:flex;flex-shrink:0;gap:var(--space-4, 16px);align-items:center}.theme-inkwell.sc-af-client-carousel-h,.client-carousel.theme-inkwell.sc-af-client-carousel{background-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-well-bg:var(--colour-background-level1-dark, #203e45);--af-carousel-logo-color:white;--af-carousel-logo-filter:brightness(0) invert(1)}.theme-white.sc-af-client-carousel-h,.client-carousel.theme-white.sc-af-client-carousel{background-color:var(--colour-brand-white, #FFFFFF);--af-carousel-logo-well-bg:var(--colour-background-level1, #e8eeed);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-mist-green.sc-af-client-carousel-h,.client-carousel.theme-mist-green.sc-af-client-carousel{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-carousel-logo-well-bg:var(--colour-mistgreen-300, #dde6e3);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-soft-clay.sc-af-client-carousel-h,.client-carousel.theme-soft-clay.sc-af-client-carousel{background-color:var(--colour-softclay-400, #c0ab8d);--af-carousel-logo-well-bg:var(--colour-softclay-200, #d5c5b0);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-white-ivory.sc-af-client-carousel-h,.client-carousel.theme-white-ivory.sc-af-client-carousel{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-carousel-logo-well-bg:var(--colour-softclay-100, #f2eadc);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}@media (max-width: 1024px){.client-carousel.sc-af-client-carousel{padding:32px 0}}@media (max-width: 767px){.client-carousel.sc-af-client-carousel{padding:24px 0}.carousel-container.sc-af-client-carousel{gap:var(--space-3, 12px)}.logo-track.sc-af-client-carousel{gap:var(--space-3, 12px)}.sc-af-client-carousel-s>*{gap:var(--space-3, 12px)}}";
+const afClientCarouselCss = ".sc-af-client-carousel-h{display:block;width:100%}.client-carousel.sc-af-client-carousel{padding:48px 0;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden}.carousel-container.sc-af-client-carousel{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%;overflow:hidden}.carousel-row.sc-af-client-carousel{display:flex;width:100%;overflow:hidden;position:relative}.logo-track.sc-af-client-carousel{display:flex;gap:var(--space-4, 16px);animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-left;animation-duration:40s}.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-right;animation-duration:40s}.sc-af-client-carousel-h:hover .logo-track.sc-af-client-carousel{animation-play-state:paused}@media (prefers-reduced-motion: reduce){.logo-track.sc-af-client-carousel,.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel,.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;transform:translateX(0)}}.client-carousel.mode-static.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;justify-content:center;flex-wrap:wrap;width:100%}.client-carousel.mode-static.sc-af-client-carousel .carousel-row.sc-af-client-carousel{justify-content:center;overflow:visible}.client-carousel.mode-static.sc-af-client-carousel .carousel-container.sc-af-client-carousel{overflow:visible}.client-carousel.mode-static.sc-af-client-carousel{overflow:hidden}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}.logo-track.sc-af-client-carousel>*.sc-af-client-carousel{display:flex;flex-shrink:0;gap:var(--space-4, 16px);align-items:center}.theme-inkwell.sc-af-client-carousel-h,.client-carousel.theme-inkwell.sc-af-client-carousel{background-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-well-bg:var(--colour-background-level1-dark, #203e45);--af-carousel-logo-color:white;--af-carousel-logo-filter:brightness(0) invert(1)}.theme-white.sc-af-client-carousel-h,.client-carousel.theme-white.sc-af-client-carousel{background-color:var(--colour-brand-white, #FFFFFF);--af-carousel-logo-well-bg:var(--colour-background-level1, #e8eeed);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-mist-green.sc-af-client-carousel-h,.client-carousel.theme-mist-green.sc-af-client-carousel{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-carousel-logo-well-bg:var(--colour-mistgreen-300, #dde6e3);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-soft-clay.sc-af-client-carousel-h,.client-carousel.theme-soft-clay.sc-af-client-carousel{background-color:var(--colour-softclay-400, #c0ab8d);--af-carousel-logo-well-bg:var(--colour-softclay-200, #d5c5b0);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-white-ivory.sc-af-client-carousel-h,.client-carousel.theme-white-ivory.sc-af-client-carousel{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-carousel-logo-well-bg:var(--colour-softclay-100, #f2eadc);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}@media (max-width: 1024px){.client-carousel.sc-af-client-carousel{padding:32px 0}}@media (max-width: 767px){.client-carousel.sc-af-client-carousel{padding:24px 0}.carousel-container.sc-af-client-carousel{gap:var(--space-3, 12px)}.logo-track.sc-af-client-carousel{gap:var(--space-3, 12px)}.sc-af-client-carousel-s>*{gap:var(--space-3, 12px)}}";
 
 const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarousel extends H {
     constructor(registerHost) {
@@ -11,16 +11,28 @@ const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarous
         /** Theme - sets background color and provides theme context to children */
         this.theme = 'inkwell';
         /**
-         * Number of scrolling rows.
-         * - `1` (default) — single row scrolling left, matches the Webflow reference.
-         * - `2` — two rows scrolling in opposite directions.
+         * Number of rows.
+         * - `1` (default) — single row, matches the Webflow reference.
+         * - `2` — two rows (scroll in opposite directions, or stacked when static).
          *
          * When `rows="2"`, slot `row-1` and `row-2` independently.
          * When `rows="1"`, slot the default slot (unnamed) or `row-1`.
          */
         this.rows = 1;
+        /**
+         * Layout mode.
+         * - `scroll` (default) — infinite animated scroll; rows fill the full
+         *   width and are cloned for a seamless loop.
+         * - `static` — no animation, logos centred horizontally. Use when the
+         *   logo set is small enough to fit on screen without scrolling.
+         */
+        this.mode = 'scroll';
     }
     componentDidLoad() {
+        // Static mode doesn't animate, so the clone trick isn't needed —
+        // skipping it avoids rendering every logo twice.
+        if (this.mode === 'static')
+            return;
         this.duplicateTrackContent(this.row1TrackRef);
         if (Number(this.rows) === 2) {
             this.duplicateTrackContent(this.row2TrackRef);
@@ -49,13 +61,17 @@ const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarous
     }
     render() {
         const rows = Number(this.rows);
-        return (h(Host, { key: '46f4a3c383b4f067cc74697860d437e38428a94c', class: `theme-${this.theme}` }, h("div", { key: '3a112f1ba371dee4fbea77994ff2ce5b33d85702', class: `client-carousel theme-${this.theme} rows-${rows}` }, h("div", { key: '32bf5229631e03fdae350f2224cbc7c2728b164d', class: "carousel-container" }, h("div", { key: '265e1f762ad375913bb0d308a1ab313bb75b76c0', class: "carousel-row scroll-left" }, h("div", { key: 'd92c38d3ff861cc1f422b261cf6239dd59b8dbfc', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, h("slot", { key: 'bf82ec86369fd9bb927a003108959eb7f8ede1bf', name: "row-1" }, h("slot", { key: '6845159319fb23679e7b27968dbe8f86cc7d4bd1' })))), rows === 2 && (h("div", { key: 'a0327e6d2f98e1e34c3ab7b763565b73e511d90d', class: "carousel-row scroll-right" }, h("div", { key: 'ead9bd1658eb547b23967463f84a3a9575e43ad5', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, h("slot", { key: 'f849ded863bd0ece4cca88143f45c658aa0c9e83', name: "row-2" }))))))));
+        // Direction classes are left on in static mode too — the `.mode-static`
+        // CSS rule overrides `animation` to `none`, so the direction is a no-op
+        // visually but keeps the markup shape consistent across modes.
+        return (h(Host, { key: 'ca25bfa9d9ca4bcf2b9326e48c89e7f5fb0599b3', class: `theme-${this.theme} mode-${this.mode}` }, h("div", { key: 'ea36aed6990f569561dce562510f88a9a50b5653', class: `client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}` }, h("div", { key: 'a96a00ea379f9908f01845e9d2e515146bc2de1e', class: "carousel-container" }, h("div", { key: '1a5d6c4298b9229ee1ef3c3cf2fd0f358e5bf0e8', class: "carousel-row scroll-left" }, h("div", { key: '825e3e9149cc95c97892bb89becc2ea3eccddde5', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, h("slot", { key: '6e03784bd1f196374f0b73bb45b54f6dc1db66a2', name: "row-1" }, h("slot", { key: 'ed18d97e06d91a10ed6914cafa488ffc59f385ff' })))), rows === 2 && (h("div", { key: '7143c9333e29ffaaf5b8bcf8d1cf905d60236a7a', class: "carousel-row scroll-right" }, h("div", { key: '8446a3dcf958b370b4cc14a27ec4bd7c0228ded2', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, h("slot", { key: '2d4de0f0697f22ac4742cebe0e20ed94b218f030', name: "row-2" }))))))));
     }
     get el() { return this; }
     static get style() { return afClientCarouselCss; }
 }, [262, "af-client-carousel", {
         "theme": [1],
-        "rows": [2]
+        "rows": [2],
+        "mode": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {