@affinda/wc 0.0.28 → 0.1.0

package/dist/cjs/af-card.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-card.entry.cjs.js","sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,i/FAAi/F;;MCet/F,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}
+{"version":3,"file":"af-card.entry.cjs.js","sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  /* radius-lg (20px) is the Affinda card corner — replaces the bespoke\n   * `--border-radius-card-level-1` that previously shimmed in at 32px.\n   * Consumers can still override by setting `--af-card-radius` on the host. */\n  border-radius: var(--af-card-radius, var(--radius-lg, 20px));\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,u/FAAu/F;;MCe5/F,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}

package/dist/cjs/af-center.cjs.entry.js

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

package/dist/cjs/af-checkbox.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afCheckboxCss = ":host{display:inline-block}.checkbox{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));user-select:none}.checkbox.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.control{position:relative;display:block;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-checkbox, 4px);border:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));transition:all 0.15s ease;box-sizing:border-box}.control.checked{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));box-shadow:none}.control.disabled{background:var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8))}.control.checked.disabled{background:var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));box-shadow:none}.checkbox:not(.disabled):hover .control:not(.checked){box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control{outline:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control.checked{box-shadow:0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:16px;height:16px;color:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
 

package/dist/cjs/af-client-carousel.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.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 = class {
     constructor(hostRef) {
@@ -10,16 +10,28 @@ const AfClientCarousel = class {
         /** 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);
@@ -48,7 +60,10 @@ const AfClientCarousel = class {
     }
     render() {
         const rows = Number(this.rows);
-        return (index.h(index.Host, { key: '46f4a3c383b4f067cc74697860d437e38428a94c', class: `theme-${this.theme}` }, index.h("div", { key: '3a112f1ba371dee4fbea77994ff2ce5b33d85702', class: `client-carousel theme-${this.theme} rows-${rows}` }, index.h("div", { key: '32bf5229631e03fdae350f2224cbc7c2728b164d', class: "carousel-container" }, index.h("div", { key: '265e1f762ad375913bb0d308a1ab313bb75b76c0', class: "carousel-row scroll-left" }, index.h("div", { key: 'd92c38d3ff861cc1f422b261cf6239dd59b8dbfc', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, index.h("slot", { key: 'bf82ec86369fd9bb927a003108959eb7f8ede1bf', name: "row-1" }, index.h("slot", { key: '6845159319fb23679e7b27968dbe8f86cc7d4bd1' })))), rows === 2 && (index.h("div", { key: 'a0327e6d2f98e1e34c3ab7b763565b73e511d90d', class: "carousel-row scroll-right" }, index.h("div", { key: 'ead9bd1658eb547b23967463f84a3a9575e43ad5', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, index.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 (index.h(index.Host, { key: 'a60dab195d08a5afa44c871598584c1175cff4af', class: `theme-${this.theme} mode-${this.mode}` }, index.h("div", { key: 'dafd6b1501a592ceaa0b9babc27d2437ccfb2c62', class: `client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}` }, index.h("div", { key: 'c318457802deebbc34b289b2d83d0dd50c15cc5c', class: "carousel-container" }, index.h("div", { key: '878d1a443b488828f54e6915cede096654624435', class: "carousel-row scroll-left" }, index.h("div", { key: '1e8751fc3ed7429196b6d7e5e9e6fb0255ab277c', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, index.h("slot", { key: 'd030308358617334fa318abd95780133d13a0b01', name: "row-1" }, index.h("slot", { key: '230f591311b0245946dd64c465fe7e9634a9ab99' })))), rows === 2 && (index.h("div", { key: 'd942aaa3e6994e73f1ad52a2deedc9564f6105fd', class: "carousel-row scroll-right" }, index.h("div", { key: '96e438271bee8bd840a7645b1634fc0e125617de', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, index.h("slot", { key: '90661d285bc8f65b1d1188f66a15edf60503b1a3', name: "row-2" }))))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/af-client-carousel.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-client-carousel.entry.cjs.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.client-carousel {\n  padding: 48px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4, 16px);\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-row {\n  display: flex;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.logo-track {\n  display: flex;\n  gap: var(--space-4, 16px);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n  animation-name: scroll-left;\n  animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n  animation-name: scroll-right;\n  animation-duration: 40s;\n}\n\n/* Pause animation on hover */\n:host(:hover) .logo-track {\n  animation-play-state: paused;\n}\n\n/* Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. */\n@media (prefers-reduced-motion: reduce) {\n  .logo-track,\n  .scroll-left .logo-track,\n  .scroll-right .logo-track {\n    animation: none;\n    transform: translateX(0);\n  }\n}\n\n@keyframes scroll-left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n\n@keyframes scroll-right {\n  0% {\n    transform: translateX(-50%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n/* Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. */\n.logo-track > * {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--space-4, 16px);\n  align-items: center;\n}\n\n/* ==========================================================================\n   Theme Variants\n   ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n  --af-carousel-logo-color: white;\n  --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n   Responsive Adjustments\n   ========================================================================== */\n\n/* Tablet adjustments */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n  .client-carousel {\n    padding: 32px 0;\n  }\n}\n\n/* Mobile adjustments */\n/* ≤ mobile */\n@media (max-width: 767px) {\n  .client-carousel {\n    padding: 24px 0;\n  }\n  \n  .carousel-container {\n    gap: var(--space-3, 12px);\n  }\n  \n  .logo-track {\n    gap: var(--space-3, 12px);\n  }\n  \n  ::slotted(*) {\n    gap: var(--space-3, 12px);\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n/**\n * Infinite scrolling carousel for client logos.\n *\n * This is a section-level component that spans full width.\n * Renders one or two scrolling rows; single row matches the Webflow\n * reference, two rows (scrolling opposite directions) is the denser\n * variant.\n *\n * For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n *\n * **Seamless loop:** the CSS animation translates the track from 0% to\n * -50% (or vice versa), which only looks continuous if the track holds\n * two identical copies of the content end-to-end. Shadow DOM slots can\n * only project content once, so we clone the slotted nodes in\n * `componentDidLoad` and append the copies to the track.\n */\n@Component({\n  tag: 'af-client-carousel',\n  styleUrl: 'af-client-carousel.css',\n  // Scoped (not shadow) so that cloned nodes inherit the consumer's\n  // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n  // carousel). Shadow DOM would seal the clones off from outer styles.\n  shadow: false,\n  scoped: true,\n})\nexport class AfClientCarousel {\n  @Element() el!: HTMLElement;\n\n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: Theme = 'inkwell';\n\n  /**\n   * Number of scrolling rows.\n   * - `1` (default) — single row scrolling left, matches the Webflow reference.\n   * - `2` — two rows scrolling in opposite directions.\n   *\n   * When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n   * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n   */\n  @Prop() rows: 1 | 2 = 1;\n\n  private row1TrackRef?: HTMLElement;\n  private row2TrackRef?: HTMLElement;\n\n  componentDidLoad() {\n    this.duplicateTrackContent(this.row1TrackRef);\n    if (Number(this.rows) === 2) {\n      this.duplicateTrackContent(this.row2TrackRef);\n    }\n  }\n\n  /**\n   * Append clones of every existing track child into the track so the\n   * -50% translate animation loops seamlessly. Marks clones with\n   * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n   * them and we can skip them when re-duplicating.\n   *\n   * In scoped mode, slotted content is moved into the track as regular\n   * children (there's no `<slot>` element to read from), so we just\n   * iterate direct children that aren't themselves prior clones.\n   */\n  private duplicateTrackContent(track: HTMLElement | undefined) {\n    if (!track) return;\n    const originals = Array.from(track.children).filter(\n      (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n    );\n    originals.forEach((el) => {\n      const clone = el.cloneNode(true) as HTMLElement;\n      clone.setAttribute('data-carousel-clone', '');\n      clone.setAttribute('aria-hidden', 'true');\n      track.appendChild(clone);\n    });\n  }\n\n  render() {\n    const rows = Number(this.rows);\n    return (\n      <Host class={`theme-${this.theme}`}>\n        <div class={`client-carousel theme-${this.theme} rows-${rows}`}>\n          <div class=\"carousel-container\">\n            <div class=\"carousel-row scroll-left\">\n              <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n                <slot name=\"row-1\">\n                  <slot></slot>\n                </slot>\n              </div>\n            </div>\n\n            {rows === 2 && (\n              <div class=\"carousel-row scroll-right\">\n                <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n                  <slot name=\"row-2\"></slot>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,yuGAAyuG;;MC8BxvG,gBAAgB,GAAA,MAAA;AAT7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAaU,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;;;;;;AAOG;AACK,QAAA,IAAI,CAAA,IAAA,GAAU,CAAC;AA6DxB;IAxDC,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,CAAC;QAC7C,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC3B,YAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,CAAC;;;AAIjD;;;;;;;;;AASG;AACK,IAAA,qBAAqB,CAAC,KAA8B,EAAA;AAC1D,QAAA,IAAI,CAAC,KAAK;YAAE;QACZ,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CACjD,CAAC,KAAK,KAAK,CAAE,KAAqB,CAAC,YAAY,CAAC,qBAAqB,CAAC,CACvE;AACD,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;YACvB,MAAM,KAAK,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAgB;AAC/C,YAAA,KAAK,CAAC,YAAY,CAAC,qBAAqB,EAAE,EAAE,CAAC;AAC7C,YAAA,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACzC,YAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;AAC1B,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,EAAE,EAAA,EAChCD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,sBAAA,EAAyB,IAAI,CAAC,KAAK,SAAS,IAAI,CAAA,CAAE,EAAA,EAC5DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,EAC3DA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH,CACF,EAEL,IAAI,KAAK,CAAC,KACTA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,EAC3DA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACP,CACG,CACF,CACD;;;;;;;;"}
+{"version":3,"file":"af-client-carousel.entry.cjs.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.client-carousel {\n  padding: 48px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4, 16px);\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-row {\n  display: flex;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.logo-track {\n  display: flex;\n  gap: var(--space-4, 16px);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n  animation-name: scroll-left;\n  animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n  animation-name: scroll-right;\n  animation-duration: 40s;\n}\n\n/* Pause animation on hover */\n:host(:hover) .logo-track {\n  animation-play-state: paused;\n}\n\n/* Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. */\n@media (prefers-reduced-motion: reduce) {\n  .logo-track,\n  .scroll-left .logo-track,\n  .scroll-right .logo-track {\n    animation: none;\n    transform: translateX(0);\n  }\n}\n\n/* ==========================================================================\n   Static Mode\n   ==========================================================================\n   Non-animated, centred row. Used when the logo set is small enough to\n   fit on screen without scrolling (the former website LogoPillRow use\n   case). The clone-for-seamless-loop is skipped in TSX, so each logo\n   appears exactly once here. */\n.client-carousel.mode-static .logo-track {\n  animation: none;\n  /* The track is what we centre — the .carousel-row is full-width so\n   * it can host the overflow cue in scroll mode; in static mode we\n   * centre its child track instead of fighting the row's flex default. */\n  justify-content: center;\n  /* Let the track grow only as wide as its content so justify-content\n   * on the parent row can actually centre it horizontally. */\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.client-carousel.mode-static .carousel-row {\n  justify-content: center;\n  /* Static rows have no scrolling motion to mask, so allow the row to\n   * expand content-naturally instead of clipping at viewport edges. */\n  overflow: visible;\n}\n\n.client-carousel.mode-static .carousel-container {\n  /* Match the row's no-clip behaviour so wrapped logos stay visible. */\n  overflow: visible;\n}\n\n.client-carousel.mode-static {\n  /* Keep horizontal bleed contained for consistency with scroll mode. */\n  overflow: hidden;\n}\n\n@keyframes scroll-left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n\n@keyframes scroll-right {\n  0% {\n    transform: translateX(-50%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n/* Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. */\n.logo-track > * {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--space-4, 16px);\n  align-items: center;\n}\n\n/* ==========================================================================\n   Theme Variants\n   ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n  --af-carousel-logo-color: white;\n  --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n   Responsive Adjustments\n   ========================================================================== */\n\n/* Tablet adjustments */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n  .client-carousel {\n    padding: 32px 0;\n  }\n}\n\n/* Mobile adjustments */\n/* ≤ mobile */\n@media (max-width: 767px) {\n  .client-carousel {\n    padding: 24px 0;\n  }\n  \n  .carousel-container {\n    gap: var(--space-3, 12px);\n  }\n  \n  .logo-track {\n    gap: var(--space-3, 12px);\n  }\n  \n  ::slotted(*) {\n    gap: var(--space-3, 12px);\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\ntype Mode = 'scroll' | 'static';\n\n/**\n * Full-width row of client logos, either infinite-scrolling (default)\n * or a centred static row.\n *\n * This is a section-level component that spans full width.\n * Renders one or two rows; single row matches the Webflow reference,\n * two rows is the denser variant. When `mode=\"scroll\"` (default) rows\n * animate in opposite directions; when `mode=\"static\"` rows are centred\n * and the animation is disabled.\n *\n * For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n *\n * **Seamless loop (scroll mode only):** the CSS animation translates\n * the track from 0% to -50% (or vice versa), which only looks continuous\n * if the track holds two identical copies of the content end-to-end.\n * Shadow DOM slots can only project content once, so we clone the\n * slotted nodes in `componentDidLoad` and append the copies to the track.\n * Static mode skips the clone — nothing is animating, so duplicating\n * the logos would just render them twice.\n */\n@Component({\n  tag: 'af-client-carousel',\n  styleUrl: 'af-client-carousel.css',\n  // Scoped (not shadow) so that cloned nodes inherit the consumer's\n  // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n  // carousel). Shadow DOM would seal the clones off from outer styles.\n  shadow: false,\n  scoped: true,\n})\nexport class AfClientCarousel {\n  @Element() el!: HTMLElement;\n\n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: Theme = 'inkwell';\n\n  /**\n   * Number of rows.\n   * - `1` (default) — single row, matches the Webflow reference.\n   * - `2` — two rows (scroll in opposite directions, or stacked when static).\n   *\n   * When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n   * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n   */\n  @Prop() rows: 1 | 2 = 1;\n\n  /**\n   * Layout mode.\n   * - `scroll` (default) — infinite animated scroll; rows fill the full\n   *   width and are cloned for a seamless loop.\n   * - `static` — no animation, logos centred horizontally. Use when the\n   *   logo set is small enough to fit on screen without scrolling.\n   */\n  @Prop() mode: Mode = 'scroll';\n\n  private row1TrackRef?: HTMLElement;\n  private row2TrackRef?: HTMLElement;\n\n  componentDidLoad() {\n    // Static mode doesn't animate, so the clone trick isn't needed —\n    // skipping it avoids rendering every logo twice.\n    if (this.mode === 'static') return;\n    this.duplicateTrackContent(this.row1TrackRef);\n    if (Number(this.rows) === 2) {\n      this.duplicateTrackContent(this.row2TrackRef);\n    }\n  }\n\n  /**\n   * Append clones of every existing track child into the track so the\n   * -50% translate animation loops seamlessly. Marks clones with\n   * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n   * them and we can skip them when re-duplicating.\n   *\n   * In scoped mode, slotted content is moved into the track as regular\n   * children (there's no `<slot>` element to read from), so we just\n   * iterate direct children that aren't themselves prior clones.\n   */\n  private duplicateTrackContent(track: HTMLElement | undefined) {\n    if (!track) return;\n    const originals = Array.from(track.children).filter(\n      (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n    );\n    originals.forEach((el) => {\n      const clone = el.cloneNode(true) as HTMLElement;\n      clone.setAttribute('data-carousel-clone', '');\n      clone.setAttribute('aria-hidden', 'true');\n      track.appendChild(clone);\n    });\n  }\n\n  render() {\n    const rows = Number(this.rows);\n    // Direction classes are left on in static mode too — the `.mode-static`\n    // CSS rule overrides `animation` to `none`, so the direction is a no-op\n    // visually but keeps the markup shape consistent across modes.\n    return (\n      <Host class={`theme-${this.theme} mode-${this.mode}`}>\n        <div class={`client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}`}>\n          <div class=\"carousel-container\">\n            <div class=\"carousel-row scroll-left\">\n              <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n                <slot name=\"row-1\">\n                  <slot></slot>\n                </slot>\n              </div>\n            </div>\n\n            {rows === 2 && (\n              <div class=\"carousel-row scroll-right\">\n                <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n                  <slot name=\"row-2\"></slot>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,8qHAA8qH;;MCmC7rH,gBAAgB,GAAA,MAAA;AAT7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAaU,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;;;;;;AAOG;AACK,QAAA,IAAI,CAAA,IAAA,GAAU,CAAC;AAEvB;;;;;;AAMG;AACK,QAAA,IAAI,CAAA,IAAA,GAAS,QAAQ;AAmE9B;IA9DC,gBAAgB,GAAA;;;AAGd,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE;AAC5B,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,CAAC;QAC7C,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC3B,YAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,CAAC;;;AAIjD;;;;;;;;;AASG;AACK,IAAA,qBAAqB,CAAC,KAA8B,EAAA;AAC1D,QAAA,IAAI,CAAC,KAAK;YAAE;QACZ,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CACjD,CAAC,KAAK,KAAK,CAAE,KAAqB,CAAC,YAAY,CAAC,qBAAqB,CAAC,CACvE;AACD,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;YACvB,MAAM,KAAK,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAgB;AAC/C,YAAA,KAAK,CAAC,YAAY,CAAC,qBAAqB,EAAE,EAAE,CAAC;AAC7C,YAAA,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACzC,YAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;AAC1B,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;;;;QAI9B,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAClDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAyB,sBAAA,EAAA,IAAI,CAAC,KAAK,CAAA,MAAA,EAAS,IAAI,CAAS,MAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAC9EA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,EAC3DA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH,CACF,EAEL,IAAI,KAAK,CAAC,KACTA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,EAC3DA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACP,CACG,CACF,CACD;;;;;;;;"}

package/dist/cjs/af-color-swatch.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.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}";
 

package/dist/cjs/af-contact-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afContactItemCss = ".sc-af-contact-item-h{display:block}.contact-item.sc-af-contact-item{display:flex;flex-direction:column;gap:4px}.contact-item__label.sc-af-contact-item{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.contact-item__value.sc-af-contact-item{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}";
 

package/dist/cjs/af-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afContainerCss = ":host{display:block;width:100%}.container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;padding-left:20px;padding-right:20px}@media (min-width: 768px){.container{padding-left:32px;padding-right:32px}.max-width-medium{max-width:768px}}@media (min-width: 1024px){.container{padding-left:64px;padding-right:64px}.max-width-large{max-width:1024px}.max-width-medium{max-width:768px}}@media (min-width: 1440px){.container{padding-left:80px;padding-right:80px}.max-width-xlarge{max-width:1440px}.max-width-large{max-width:1024px}.max-width-medium{max-width:768px}}.max-width-fluid{max-width:none}";
 

package/dist/cjs/af-divider.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afDividerCss = ":host{box-sizing:border-box;flex-shrink:0}:host([hidden]){display:none}:host(.divider--horizontal){display:block;width:100%;height:1px;background-color:var(--colour-tints-inkwell-100, #d4d4d4)}:host(.divider--vertical){display:inline-block;width:1px;height:100%;min-height:1em;background-color:var(--colour-tints-inkwell-100, #d4d4d4);align-self:stretch}";
 

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
-const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{padding:0 24px;--_heading-color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));--_body-color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));--_border-color:var(--af-background-border-default, rgba(20, 52, 59, 0.12));--_level-1-bg:var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3))}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--_heading-color);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid var(--_border-color)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid var(--_border-color)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--_heading-color)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--_heading-color);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{opacity:0.7}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--_heading-color);transition:transform 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{opacity:0.5}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:var(--_body-color);margin:0 0 20px 0;padding-right:40px;opacity:0.85}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:var(--_border-color);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--colour-brand-ice, #a6fffb);border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:var(--_level-1-bg);border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:32px}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";
+const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{padding:0 24px;--_heading-color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));--_body-color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));--_border-color:var(--af-background-border-default, rgba(20, 52, 59, 0.12))}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--_heading-color);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid var(--_border-color)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid var(--_border-color)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--_heading-color)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--_heading-color);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{opacity:0.7}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--_heading-color);transition:transform 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{opacity:0.5}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:var(--_body-color);margin:0 0 20px 0;padding-right:40px;opacity:0.85}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:var(--_border-color);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--af-accent-progress, var(--colour-softclay-600, #9e8765));border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--af-feature-accordion-image-pad, 40px)}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";
 
 const AfFeatureAccordion = class {
     constructor(hostRef) {

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

@@ -1 +1 @@
-{"version":3,"file":"af-feature-accordion.entry.cjs.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.feature-accordion {\n  /* Inherits theme from parent Section via CSS custom properties */\n  padding: 0 24px;\n  \n  /* Internal custom properties that inherit from parent Section's theme */\n  --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n  --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n  --_level-1-bg: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n}\n\n.feature-accordion__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: clamp(36px, 5vw, 52px);\n  line-height: 1.05;\n  letter-spacing: -0.025em;\n  color: var(--_heading-color);\n  margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n  display: flex;\n  gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n  border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n  border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 24px 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n  color: var(--_heading-color);\n}\n\n.accordion-item__title {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  font-size: 22px;\n  line-height: 1.25;\n  color: var(--_heading-color);\n  margin: 0;\n  flex: 1;\n  transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n  opacity: 0.7;\n}\n\n.accordion-item__icon {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  color: var(--_heading-color);\n  transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n  opacity: 0.5;\n}\n\n.accordion-item__content {\n  overflow: hidden;\n  transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 1.6;\n  color: var(--_body-color);\n  margin: 0 0 20px 0;\n  padding-right: 40px;\n  opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n  height: 3px;\n  background-color: var(--_border-color);\n  border-radius: 2px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  display: flex;\n  justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n  height: 100%;\n  background-color: var(--colour-brand-ice, #a6fffb);\n  border-radius: 2px;\n  transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_level-1-bg);\n  border-radius: 20px;\n  overflow: hidden;\n  flex: 1;\n  min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 32px;\n}\n\n.feature-accordion__image {\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: contain;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Tablet */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n  .feature-accordion__content {\n    gap: 32px;\n  }\n\n  .feature-accordion__heading {\n    margin-bottom: 40px;\n  }\n\n  .accordion-item__title {\n    font-size: 20px;\n  }\n}\n\n/* Mobile */\n/* mobile-only */\n@media (max-width: 768px) {\n  .feature-accordion__content {\n    flex-direction: column;\n    gap: 32px;\n  }\n\n  .feature-accordion__image-container {\n    order: -1;\n    min-height: 280px;\n    flex: none;\n  }\n\n  .feature-accordion__list {\n    flex: none;\n  }\n\n  .accordion-item__title {\n    font-size: 18px;\n  }\n\n  .accordion-item__description {\n    font-size: 15px;\n    padding-right: 0;\n  }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n  title: string;\n  description: string;\n  imageUrl?: string;\n  imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n *   <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n */\n@Component({\n  tag: 'af-feature-accordion',\n  styleUrl: 'af-feature-accordion.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureAccordion {\n  @Element() el!: HTMLElement;\n\n  /** Section heading */\n  @Prop() heading: string = 'Give AI agents your paperwork';\n\n  /** JSON string of accordion items */\n  @Prop() items: string = '[]';\n\n  /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n  @Prop() cycleInterval: number = 6000;\n\n  /** Whether auto-cycling is enabled */\n  @Prop() autoCycle: boolean = true;\n\n  /** Currently expanded item index */\n  @State() expandedIndex: number = 0;\n\n  /** Progress of current timer (0-100) */\n  @State() timerProgress: number = 100;\n\n  private progressTimer: number | null = null;\n  private progressStartTime: number = 0;\n\n  componentDidLoad() {\n    if (this.autoCycle) {\n      this.startCycling();\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopCycling();\n  }\n\n  @Watch('autoCycle')\n  handleAutoCycleChange(newValue: boolean) {\n    if (newValue) {\n      this.startCycling();\n    } else {\n      this.stopCycling();\n    }\n  }\n\n  private getItems(): FeatureAccordionItem[] {\n    try {\n      return JSON.parse(this.items);\n    } catch {\n      return [];\n    }\n  }\n\n  private startCycling() {\n    this.stopCycling();\n    this.progressStartTime = Date.now();\n    this.timerProgress = 100;\n    \n    // Progress animation frame\n    const updateProgress = () => {\n      const elapsed = Date.now() - this.progressStartTime;\n      const remaining = this.cycleInterval - elapsed;\n      \n      if (remaining <= 0) {\n        this.moveToNextItem();\n      } else {\n        this.timerProgress = (remaining / this.cycleInterval) * 100;\n        this.progressTimer = requestAnimationFrame(updateProgress);\n      }\n    };\n    \n    this.progressTimer = requestAnimationFrame(updateProgress);\n  }\n\n  private stopCycling() {\n    if (this.progressTimer) {\n      cancelAnimationFrame(this.progressTimer);\n      this.progressTimer = null;\n    }\n  }\n\n  private moveToNextItem() {\n    const items = this.getItems();\n    if (items.length === 0) return;\n    \n    this.expandedIndex = (this.expandedIndex + 1) % items.length;\n    // Restart the cycling timer for the new item\n    this.startCycling();\n  }\n\n  private handleItemClick(index: number) {\n    // Reset timer when user clicks\n    this.expandedIndex = index;\n    // Restart the cycling timer for the clicked item\n    if (this.autoCycle) {\n      this.startCycling();\n    }\n  }\n\n  render() {\n    const items = this.getItems();\n    const currentItem = items[this.expandedIndex];\n\n    return (\n      <Host>\n        <div class=\"feature-accordion\">\n          <div class=\"feature-accordion__container\">\n            <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n            \n            <div class=\"feature-accordion__content\">\n              {/* Left side - Accordion */}\n              <div class=\"feature-accordion__list\">\n                {items.map((item, index) => (\n                  <div \n                    class={{\n                      'accordion-item': true,\n                      'accordion-item--expanded': this.expandedIndex === index\n                    }}\n                    key={index}\n                  >\n                    <button \n                      class=\"accordion-item__header\"\n                      onClick={() => this.handleItemClick(index)}\n                      aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n                    >\n                      <h4 class=\"accordion-item__title\">{item.title}</h4>\n                      <span class=\"accordion-item__icon\">\n                        {this.expandedIndex === index ? (\n                          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n                          </svg>\n                        ) : (\n                          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n                          </svg>\n                        )}\n                      </span>\n                    </button>\n                    <div \n                      class=\"accordion-item__content\"\n                      style={{ \n                        maxHeight: this.expandedIndex === index ? '200px' : '0',\n                        opacity: this.expandedIndex === index ? '1' : '0'\n                      }}\n                    >\n                      <p class=\"accordion-item__description\">{item.description}</p>\n                      {this.expandedIndex === index && this.autoCycle && (\n                        <div class=\"accordion-item__timer-track\">\n                          <div \n                            class=\"accordion-item__timer-progress\"\n                            style={{ width: `${this.timerProgress}%` }}\n                          ></div>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </div>\n\n              {/* Right side - Image */}\n              <div class=\"feature-accordion__image-container\">\n                <div class=\"feature-accordion__image-wrapper\">\n                  {currentItem?.imageUrl && (\n                    <img \n                      src={currentItem.imageUrl} \n                      alt={currentItem.imageAlt || currentItem.title}\n                      class=\"feature-accordion__image\"\n                    />\n                  )}\n                  {!currentItem?.imageUrl && (\n                    <div class=\"feature-accordion__image-placeholder\">\n                      <slot name=\"image\"></slot>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","index"],"mappings":"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"}
+{"version":3,"file":"af-feature-accordion.entry.cjs.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/*\n * af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n *\n *   --af-accent-progress            Colour of the per-item timer/progress bar.\n *                                    Defaults to --colour-softclay-600 (brand\n *                                    soft-clay). Override to retheme the accent.\n *   --af-feature-accordion-image-pad\n *                                   Padding around the accompanying image\n *                                    inside its rounded container. Defaults to\n *                                    40px — tune for tighter or looser rhythm.\n *\n * The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n *\n *   --af-typography-heading-primary   heading colour\n *   --af-typography-body-default      body colour\n *   --af-background-border-default    rule/divider colour\n *   --af-background-level-1           image-container background\n */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.feature-accordion {\n  /* Inherits theme from parent Section via CSS custom properties */\n  padding: 0 24px;\n\n  /* Internal custom properties that inherit from parent Section's theme */\n  --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n  --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: clamp(36px, 5vw, 52px);\n  line-height: 1.05;\n  letter-spacing: -0.025em;\n  color: var(--_heading-color);\n  margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n  display: flex;\n  gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n  border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n  border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 24px 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n  color: var(--_heading-color);\n}\n\n.accordion-item__title {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  font-size: 22px;\n  line-height: 1.25;\n  color: var(--_heading-color);\n  margin: 0;\n  flex: 1;\n  transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n  opacity: 0.7;\n}\n\n.accordion-item__icon {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  color: var(--_heading-color);\n  transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n  opacity: 0.5;\n}\n\n.accordion-item__content {\n  overflow: hidden;\n  transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 1.6;\n  color: var(--_body-color);\n  margin: 0 0 20px 0;\n  padding-right: 40px;\n  opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n  height: 3px;\n  background-color: var(--_border-color);\n  border-radius: 2px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  display: flex;\n  justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n  height: 100%;\n  background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n  border-radius: 2px;\n  transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Flows from parent Section's theme; mist-green fallback for unthemed use */\n  background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n  border-radius: 20px;\n  overflow: hidden;\n  flex: 1;\n  min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: contain;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Tablet */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n  .feature-accordion__content {\n    gap: 32px;\n  }\n\n  .feature-accordion__heading {\n    margin-bottom: 40px;\n  }\n\n  .accordion-item__title {\n    font-size: 20px;\n  }\n}\n\n/* Mobile */\n/* mobile-only */\n@media (max-width: 768px) {\n  .feature-accordion__content {\n    flex-direction: column;\n    gap: 32px;\n  }\n\n  .feature-accordion__image-container {\n    order: -1;\n    min-height: 280px;\n    flex: none;\n  }\n\n  .feature-accordion__list {\n    flex: none;\n  }\n\n  .accordion-item__title {\n    font-size: 18px;\n  }\n\n  .accordion-item__description {\n    font-size: 15px;\n    padding-right: 0;\n  }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n  title: string;\n  description: string;\n  imageUrl?: string;\n  imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n *   <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n */\n@Component({\n  tag: 'af-feature-accordion',\n  styleUrl: 'af-feature-accordion.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureAccordion {\n  @Element() el!: HTMLElement;\n\n  /** Section heading */\n  @Prop() heading: string = 'Give AI agents your paperwork';\n\n  /** JSON string of accordion items */\n  @Prop() items: string = '[]';\n\n  /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n  @Prop() cycleInterval: number = 6000;\n\n  /** Whether auto-cycling is enabled */\n  @Prop() autoCycle: boolean = true;\n\n  /** Currently expanded item index */\n  @State() expandedIndex: number = 0;\n\n  /** Progress of current timer (0-100) */\n  @State() timerProgress: number = 100;\n\n  private progressTimer: number | null = null;\n  private progressStartTime: number = 0;\n\n  componentDidLoad() {\n    if (this.autoCycle) {\n      this.startCycling();\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopCycling();\n  }\n\n  @Watch('autoCycle')\n  handleAutoCycleChange(newValue: boolean) {\n    if (newValue) {\n      this.startCycling();\n    } else {\n      this.stopCycling();\n    }\n  }\n\n  private getItems(): FeatureAccordionItem[] {\n    try {\n      return JSON.parse(this.items);\n    } catch {\n      return [];\n    }\n  }\n\n  private startCycling() {\n    this.stopCycling();\n    this.progressStartTime = Date.now();\n    this.timerProgress = 100;\n    \n    // Progress animation frame\n    const updateProgress = () => {\n      const elapsed = Date.now() - this.progressStartTime;\n      const remaining = this.cycleInterval - elapsed;\n      \n      if (remaining <= 0) {\n        this.moveToNextItem();\n      } else {\n        this.timerProgress = (remaining / this.cycleInterval) * 100;\n        this.progressTimer = requestAnimationFrame(updateProgress);\n      }\n    };\n    \n    this.progressTimer = requestAnimationFrame(updateProgress);\n  }\n\n  private stopCycling() {\n    if (this.progressTimer) {\n      cancelAnimationFrame(this.progressTimer);\n      this.progressTimer = null;\n    }\n  }\n\n  private moveToNextItem() {\n    const items = this.getItems();\n    if (items.length === 0) return;\n    \n    this.expandedIndex = (this.expandedIndex + 1) % items.length;\n    // Restart the cycling timer for the new item\n    this.startCycling();\n  }\n\n  private handleItemClick(index: number) {\n    // Reset timer when user clicks\n    this.expandedIndex = index;\n    // Restart the cycling timer for the clicked item\n    if (this.autoCycle) {\n      this.startCycling();\n    }\n  }\n\n  render() {\n    const items = this.getItems();\n    const currentItem = items[this.expandedIndex];\n\n    return (\n      <Host>\n        <div class=\"feature-accordion\">\n          <div class=\"feature-accordion__container\">\n            <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n            \n            <div class=\"feature-accordion__content\">\n              {/* Left side - Accordion */}\n              <div class=\"feature-accordion__list\">\n                {items.map((item, index) => (\n                  <div \n                    class={{\n                      'accordion-item': true,\n                      'accordion-item--expanded': this.expandedIndex === index\n                    }}\n                    key={index}\n                  >\n                    <button \n                      class=\"accordion-item__header\"\n                      onClick={() => this.handleItemClick(index)}\n                      aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n                    >\n                      <h4 class=\"accordion-item__title\">{item.title}</h4>\n                      <span class=\"accordion-item__icon\">\n                        {this.expandedIndex === index ? (\n                          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n                          </svg>\n                        ) : (\n                          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n                          </svg>\n                        )}\n                      </span>\n                    </button>\n                    <div \n                      class=\"accordion-item__content\"\n                      style={{ \n                        maxHeight: this.expandedIndex === index ? '200px' : '0',\n                        opacity: this.expandedIndex === index ? '1' : '0'\n                      }}\n                    >\n                      <p class=\"accordion-item__description\">{item.description}</p>\n                      {this.expandedIndex === index && this.autoCycle && (\n                        <div class=\"accordion-item__timer-track\">\n                          <div \n                            class=\"accordion-item__timer-progress\"\n                            style={{ width: `${this.timerProgress}%` }}\n                          ></div>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </div>\n\n              {/* Right side - Image */}\n              <div class=\"feature-accordion__image-container\">\n                <div class=\"feature-accordion__image-wrapper\">\n                  {currentItem?.imageUrl && (\n                    <img \n                      src={currentItem.imageUrl} \n                      alt={currentItem.imageAlt || currentItem.title}\n                      class=\"feature-accordion__image\"\n                    />\n                  )}\n                  {!currentItem?.imageUrl && (\n                    <div class=\"feature-accordion__image-placeholder\">\n                      <slot name=\"image\"></slot>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","index"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/af-footer.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-footer.entry.cjs.js","sources":["src/components/af-footer/af-footer.css?tag=af-footer&encapsulation=scoped","src/components/af-footer/af-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.footer {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  padding: 120px 0 0; /* Extra padding at top for overlapping cards */\n}\n\n.footer__container {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n/* Top section layout */\n.footer__top {\n  display: grid;\n  grid-template-columns: 380px 1fr;\n  gap: 48px;\n  padding-bottom: 48px;\n}\n\n/* Brand column (left side) */\n.footer__brand {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer__brand-card {\n  background-color: rgba(198, 213, 209, 0.08);\n  border-radius: 16px;\n  padding: 32px;\n}\n\n.footer__logo {\n  margin-bottom: 24px;\n}\n\n.footer__logo svg,\n.footer__logo img {\n  height: 32px;\n  width: auto;\n}\n\n.footer__social {\n  display: flex;\n  gap: 12px;\n}\n\n.footer__social-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border: 1px solid rgba(198, 213, 209, 0.3);\n  border-radius: 50%;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  transition: all 0.2s ease;\n}\n\n.footer__social-link:hover {\n  background-color: rgba(198, 213, 209, 0.1);\n  border-color: rgba(198, 213, 209, 0.5);\n}\n\n.footer__contact-card {\n  background-color: rgba(198, 213, 209, 0.08);\n  border-radius: 16px;\n  padding: 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.footer__contact-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.footer__contact-label {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  margin: 0;\n}\n\n.footer__contact-value {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(198, 213, 209, 0.7);\n  margin: 0;\n}\n\n/* Navigation section (right side) */\n.footer__nav {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.footer__nav-columns {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 32px;\n}\n\n.footer__nav-column {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer__nav-heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  margin: 0;\n  text-transform: none;\n}\n\n.footer__nav-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.footer__nav-list li {\n  margin: 0;\n}\n\n.footer__nav-list a {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(198, 213, 209, 0.7);\n  text-decoration: none;\n  transition: color 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.footer__nav-list a:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n}\n\n.footer__external-icon {\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n/* Status indicator */\n.footer__status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid rgba(198, 213, 209, 0.1);\n}\n\n.footer__status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.footer__status-dot--operational {\n  background-color: #22c55e;\n}\n\n.footer__status-dot--issue {\n  background-color: #ef4444;\n}\n\n.footer__status-text {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n}\n\n.footer__status-link {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  margin-left: 8px;\n}\n\n.footer__status-link:hover {\n  text-decoration: none;\n}\n\n/* Bottom section */\n.footer__bottom {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 24px;\n  padding: 24px 0;\n  border-top: 1px solid rgba(198, 213, 209, 0.1);\n  background-color: rgba(198, 213, 209, 0.05);\n  margin: 0 -24px;\n  /* Honour iOS safe-area insets so the copyright strip doesn't sit under the\n     home indicator (bottom) or under landscape edge cutouts (left/right). */\n  padding-left: calc(24px + env(safe-area-inset-left));\n  padding-right: calc(24px + env(safe-area-inset-right));\n  padding-bottom: max(24px, env(safe-area-inset-bottom));\n}\n\n.footer__copyright {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n  margin: 0;\n}\n\n.footer__legal {\n  display: flex;\n  gap: 24px;\n}\n\n.footer__legal a {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n.footer__legal a:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  text-decoration: none;\n}\n\n.footer__badges {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n\n.footer__badge {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.footer__badge svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Responsive styles */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n  .footer__top {\n    grid-template-columns: 1fr;\n    gap: 48px;\n  }\n\n  .footer__brand {\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .footer__brand-card,\n  .footer__contact-card {\n    flex: 1;\n  }\n}\n\n/* mobile-only */\n@media (max-width: 768px) {\n  .footer {\n    padding: 48px 0 0;\n  }\n\n  .footer__top {\n    gap: 32px;\n  }\n\n  .footer__brand {\n    flex-direction: column;\n  }\n\n  .footer__nav-columns {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 32px;\n  }\n\n  .footer__bottom {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n  }\n\n  .footer__legal {\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n}\n\n/* ≤ small */\n@media (max-width: 480px) {\n  .footer__container {\n    padding: 0 16px;\n  }\n\n  .footer__brand-card,\n  .footer__contact-card {\n    padding: 24px;\n  }\n\n  .footer__nav-columns {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .footer__bottom {\n    margin: 0 -16px;\n    padding-left: calc(16px + env(safe-area-inset-left));\n    padding-right: calc(16px + env(safe-area-inset-right));\n    /* padding-bottom inherits from base rule with max(24px, safe-area-inset-bottom) */\n  }\n\n  .footer__badges {\n    width: 100%;\n    justify-content: flex-start;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Footer component for marketing pages\n * Provides a flexible, slot-based layout for footer content\n * All content is passed via slots - no hardcoded links or content\n */\n@Component({\n  tag: 'af-footer',\n  styleUrl: 'af-footer.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFooter {\n  /** Copyright text (e.g., \"© 2025 Company Name. All rights reserved.\") */\n  @Prop() copyrightText: string = '';\n\n  /** Status message text */\n  @Prop() statusText: string = '';\n\n  /** Status page URL */\n  @Prop() statusUrl: string = '';\n\n  /** Whether systems are operational (shows green/red indicator) */\n  @Prop() systemsOperational: boolean = true;\n\n  /** Whether to show the status indicator */\n  @Prop() showStatus: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <footer class=\"footer\">\n          <div class=\"footer__container\">\n            {/* Top section */}\n            <div class=\"footer__top\">\n              {/* Left column - Brand area */}\n              <div class=\"footer__brand\">\n                <div class=\"footer__brand-card\">\n                  <div class=\"footer__logo\">\n                    <slot name=\"logo\"></slot>\n                  </div>\n                  <div class=\"footer__social\">\n                    <slot name=\"social\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"footer__contact-card\">\n                  <slot name=\"contact\"></slot>\n                </div>\n              </div>\n\n              {/* Right section - Navigation columns */}\n              <div class=\"footer__nav\">\n                <div class=\"footer__nav-columns\">\n                  <slot name=\"nav\"></slot>\n                </div>\n\n                {/* Status indicator */}\n                {this.showStatus && (\n                  <div class=\"footer__status\">\n                    <span class={`footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}`}></span>\n                    <span class=\"footer__status-text\">\n                      {this.statusText}\n                    </span>\n                    {this.statusUrl && (\n                      <a href={this.statusUrl} target=\"_blank\" rel=\"noopener noreferrer\" class=\"footer__status-link\">\n                        Learn more\n                      </a>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n\n            {/* Bottom section */}\n            <div class=\"footer__bottom\">\n              {this.copyrightText && (\n                <p class=\"footer__copyright\">{this.copyrightText}</p>\n              )}\n              \n              <div class=\"footer__legal\">\n                <slot name=\"legal\"></slot>\n              </div>\n\n              <div class=\"footer__badges\">\n                <slot name=\"badges\"></slot>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"af-footer.entry.cjs.js","sources":["src/components/af-footer/af-footer.css?tag=af-footer&encapsulation=scoped","src/components/af-footer/af-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.footer {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  padding: 120px 0 0; /* Extra padding at top for overlapping cards */\n}\n\n.footer__container {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n/* Top section layout */\n.footer__top {\n  display: grid;\n  grid-template-columns: 380px 1fr;\n  gap: 48px;\n  padding-bottom: 48px;\n}\n\n/* Brand column (left side) */\n.footer__brand {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer__brand-card {\n  background-color: rgba(198, 213, 209, 0.08);\n  border-radius: 16px;\n  padding: 32px;\n}\n\n.footer__logo {\n  margin-bottom: 24px;\n}\n\n.footer__logo svg,\n.footer__logo img {\n  height: 32px;\n  width: auto;\n}\n\n.footer__social {\n  display: flex;\n  gap: 12px;\n}\n\n.footer__social-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border: 1px solid rgba(198, 213, 209, 0.3);\n  border-radius: 50%;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  transition: all 0.2s ease;\n}\n\n.footer__social-link:hover {\n  background-color: rgba(198, 213, 209, 0.1);\n  border-color: rgba(198, 213, 209, 0.5);\n}\n\n.footer__contact-card {\n  background-color: rgba(198, 213, 209, 0.08);\n  border-radius: 16px;\n  padding: 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.footer__contact-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.footer__contact-label {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  margin: 0;\n}\n\n.footer__contact-value {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(198, 213, 209, 0.7);\n  margin: 0;\n}\n\n/* Navigation section (right side) */\n.footer__nav {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.footer__nav-columns {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 32px;\n}\n\n.footer__nav-column {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer__nav-heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  margin: 0;\n  text-transform: none;\n}\n\n.footer__nav-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.footer__nav-list li {\n  margin: 0;\n}\n\n.footer__nav-list a {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(198, 213, 209, 0.7);\n  text-decoration: none;\n  transition: color 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.footer__nav-list a:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n}\n\n.footer__external-icon {\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n/* Status indicator */\n.footer__status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid rgba(198, 213, 209, 0.1);\n}\n\n.footer__status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.footer__status-dot--operational {\n  /* Affinda-palette green — tuned to sit comfortably against the inkwell\n   * footer backdrop without the candy-bright Tailwind default. */\n  background-color: var(--status-ok, #3E8F6E);\n}\n\n.footer__status-dot--issue {\n  /* Affinda-palette red — darkened toward soft-clay to match brand tone. */\n  background-color: var(--status-issue, #B94A3B);\n}\n\n.footer__status-text {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n}\n\n.footer__status-link {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  margin-left: 8px;\n}\n\n.footer__status-link:hover {\n  text-decoration: none;\n}\n\n/* Bottom section */\n.footer__bottom {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 24px;\n  padding: 24px 0;\n  border-top: 1px solid rgba(198, 213, 209, 0.1);\n  background-color: rgba(198, 213, 209, 0.05);\n  margin: 0 -24px;\n  /* Honour iOS safe-area insets so the copyright strip doesn't sit under the\n     home indicator (bottom) or under landscape edge cutouts (left/right). */\n  padding-left: calc(24px + env(safe-area-inset-left));\n  padding-right: calc(24px + env(safe-area-inset-right));\n  padding-bottom: max(24px, env(safe-area-inset-bottom));\n}\n\n.footer__copyright {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n  margin: 0;\n}\n\n.footer__legal {\n  display: flex;\n  gap: 24px;\n}\n\n.footer__legal a {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n.footer__legal a:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  text-decoration: none;\n}\n\n.footer__badges {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n\n.footer__badge {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.footer__badge svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Responsive styles */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n  .footer__top {\n    grid-template-columns: 1fr;\n    gap: 48px;\n  }\n\n  .footer__brand {\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .footer__brand-card,\n  .footer__contact-card {\n    flex: 1;\n  }\n}\n\n/* mobile-only */\n@media (max-width: 768px) {\n  .footer {\n    padding: 48px 0 0;\n  }\n\n  .footer__top {\n    gap: 32px;\n  }\n\n  .footer__brand {\n    flex-direction: column;\n  }\n\n  .footer__nav-columns {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 32px;\n  }\n\n  .footer__bottom {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n  }\n\n  .footer__legal {\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n}\n\n/* ≤ small */\n@media (max-width: 480px) {\n  .footer__container {\n    padding: 0 16px;\n  }\n\n  .footer__brand-card,\n  .footer__contact-card {\n    padding: 24px;\n  }\n\n  .footer__nav-columns {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .footer__bottom {\n    margin: 0 -16px;\n    padding-left: calc(16px + env(safe-area-inset-left));\n    padding-right: calc(16px + env(safe-area-inset-right));\n    /* padding-bottom inherits from base rule with max(24px, safe-area-inset-bottom) */\n  }\n\n  .footer__badges {\n    width: 100%;\n    justify-content: flex-start;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Footer component for marketing pages\n * Provides a flexible, slot-based layout for footer content\n * All content is passed via slots - no hardcoded links or content\n */\n@Component({\n  tag: 'af-footer',\n  styleUrl: 'af-footer.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFooter {\n  /** Copyright text (e.g., \"© 2025 Company Name. All rights reserved.\") */\n  @Prop() copyrightText: string = '';\n\n  /** Status message text */\n  @Prop() statusText: string = '';\n\n  /** Status page URL */\n  @Prop() statusUrl: string = '';\n\n  /** Whether systems are operational (shows green/red indicator) */\n  @Prop() systemsOperational: boolean = true;\n\n  /** Whether to show the status indicator */\n  @Prop() showStatus: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <footer class=\"footer\">\n          <div class=\"footer__container\">\n            {/* Top section */}\n            <div class=\"footer__top\">\n              {/* Left column - Brand area */}\n              <div class=\"footer__brand\">\n                <div class=\"footer__brand-card\">\n                  <div class=\"footer__logo\">\n                    <slot name=\"logo\"></slot>\n                  </div>\n                  <div class=\"footer__social\">\n                    <slot name=\"social\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"footer__contact-card\">\n                  <slot name=\"contact\"></slot>\n                </div>\n              </div>\n\n              {/* Right section - Navigation columns */}\n              <div class=\"footer__nav\">\n                <div class=\"footer__nav-columns\">\n                  <slot name=\"nav\"></slot>\n                </div>\n\n                {/* Status indicator */}\n                {this.showStatus && (\n                  <div class=\"footer__status\">\n                    <span class={`footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}`}></span>\n                    <span class=\"footer__status-text\">\n                      {this.statusText}\n                    </span>\n                    {this.statusUrl && (\n                      <a href={this.statusUrl} target=\"_blank\" rel=\"noopener noreferrer\" class=\"footer__status-link\">\n                        Learn more\n                      </a>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n\n            {/* Bottom section */}\n            <div class=\"footer__bottom\">\n              {this.copyrightText && (\n                <p class=\"footer__copyright\">{this.copyrightText}</p>\n              )}\n              \n              <div class=\"footer__legal\">\n                <slot name=\"legal\"></slot>\n              </div>\n\n              <div class=\"footer__badges\">\n                <slot name=\"badges\"></slot>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

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

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

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

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