@affinda/wc 0.0.26 → 0.0.28

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
 
-const afCenterCss = () => `:host{display:flex;box-sizing:border-box}:host([hidden]){display:none}`;
+const afCenterCss = ":host{display:flex;box-sizing:border-box}:host([hidden]){display:none}";
 
 const AfCenter = class {
     constructor(hostRef) {
@@ -34,6 +34,7 @@ const AfCenter = class {
         return (h(Host, { key: 'fc1bcaef9b11c0c5f69e9ef95d58adf61b4f244a', style: style }, h("slot", { key: '09dc75e0a80760d56e370ad0b52231f4143549e8' })));
     }
 };
-AfCenter.style = afCenterCss();
+AfCenter.style = afCenterCss;
 
 export { AfCenter as af_center };
+//# sourceMappingURL=af-center.entry.js.map

package/dist/esm/af-center.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-center.entry.js","sources":["src/components/af-center/af-center.css?tag=af-center&encapsulation=shadow","src/components/af-center/af-center.tsx"],"sourcesContent":[":host {\n  display: flex;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Axis = 'horizontal' | 'vertical' | 'both';\n\n/**\n * Center layout component for quickly centering content.\n * Supports horizontal, vertical, or both axes.\n *\n * @slot - Content to center\n */\n@Component({\n  tag: 'af-center',\n  styleUrl: 'af-center.css',\n  shadow: true,\n})\nexport class AfCenter {\n  /**\n   * Which axis to center on.\n   * - 'horizontal': Center horizontally (justify-content: center)\n   * - 'vertical': Center vertically (align-items: center)\n   * - 'both': Center on both axes\n   */\n  @Prop() axis: Axis = 'both';\n\n  /**\n   * Use inline-flex instead of flex.\n   * Useful when the center container should only take up as much space as needed.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Set a minimum height. Useful for vertical centering in a viewport.\n   * Accepts any valid CSS value (e.g., '100vh', '400px').\n   */\n  @Prop() minHeight?: string;\n\n  render() {\n    const style: Record<string, string> = {\n      display: this.inline ? 'inline-flex' : 'flex',\n    };\n\n    if (this.axis === 'horizontal' || this.axis === 'both') {\n      style.justifyContent = 'center';\n    }\n\n    if (this.axis === 'vertical' || this.axis === 'both') {\n      style.alignItems = 'center';\n    }\n\n    if (this.minHeight) {\n      style.minHeight = this.minHeight;\n    }\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,wEAAwE;;MCe/E,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAS,MAAM;AAE3B;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AA+BhC;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAA2B;YACpC,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,MAAM;SAC9C;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACtD,YAAA,KAAK,CAAC,cAAc,GAAG,QAAQ;;AAGjC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACpD,YAAA,KAAK,CAAC,UAAU,GAAG,QAAQ;;AAG7B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;;QAGlC,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-nb89SRN6.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)),     0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)),      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)),      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}`;
+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}";
 
 const AfCheckbox = class {
     constructor(hostRef) {
@@ -50,6 +50,7 @@ const AfCheckbox = class {
         return (h(Host, { key: 'ac1342168fe00b6f44c4c66b0209b757f9e7aeea' }, h("label", { key: 'af654777ec1ab09e5adf5893c1c5d3b5b1d9cb05', class: checkboxClasses }, h("input", { key: '7e59073ceb227f2440a2aca07de4ba3bb9f5460e', type: "checkbox", class: "input", ref: (el) => this.inputEl = el ?? undefined, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: '7e07dc92184ea28516d2789dfd3eccf5fc0066da', class: controlClasses }, this.checked && !this.indeterminate && (h("svg", { key: '10da3ed00d0d94d494a89532f44c64012ed775ce', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'aae8aa17285c64b5448546504286a054a76873d9', d: "M13.5 4L6 11.5L2.5 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '900391d075f2284e1f80891f34e9d4d24e635b2c', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '43cd04ad38021b0d9641ed3b5d7efa15b7e1281e', d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("span", { key: 'c5eea42915108d23d6eb104ada070e843a6a24f1', class: "label" }, h("slot", { key: '8572b7a2c909d201c6800737dfb528baa52de573' })))));
     }
 };
-AfCheckbox.style = afCheckboxCss();
+AfCheckbox.style = afCheckboxCss;
 
 export { AfCheckbox as af_checkbox };
+//# sourceMappingURL=af-checkbox.entry.js.map

package/dist/esm/af-checkbox.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-checkbox.entry.js","sources":["src/components/af-checkbox/af-checkbox.css?tag=af-checkbox&encapsulation=shadow","src/components/af-checkbox/af-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.checkbox.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Custom checkbox control */\n.control {\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-checkbox, 4px);\n  /* Use inset box-shadow instead of border to prevent layout shift */\n  border: none;\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked/indeterminate state */\n.control.checked {\n  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n  box-shadow: none;\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n  background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n  box-shadow: none;\n}\n\n/* Hover state */\n.checkbox:not(.disabled):hover .control:not(.checked) {\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  outline: none;\n  box-shadow: \n    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));\n}\n\n.input:focus-visible + .control.checked {\n  box-shadow: \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));\n}\n\n/* Icon styling - absolutely positioned to prevent layout shift */\n.icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 16px;\n  height: 16px;\n  color: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Checkbox component for selecting multiple options.\n * Supports checked, unchecked, and indeterminate states.\n * \n * @slot - Checkbox label text\n */\n@Component({\n  tag: 'af-checkbox',\n  styleUrl: 'af-checkbox.css',\n  shadow: true\n})\nexport class AfCheckbox {\n  /**\n   * Whether the checkbox is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Whether the checkbox is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the checkbox for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the checkbox for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the checkbox checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean }>;\n\n  private inputEl?: HTMLInputElement;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.afChange.emit({ checked: this.checked });\n  };\n\n  componentDidLoad() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  render() {\n    const checkboxClasses = {\n      'checkbox': true,\n      'checked': this.checked,\n      'indeterminate': this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked || this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={checkboxClasses}>\n          <input\n            type=\"checkbox\"\n            class=\"input\"\n            ref={(el) => this.inputEl = el ?? undefined}\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && !this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M13.5 4L6 11.5L2.5 8\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\" \n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            )}\n            {this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M3 8H13\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-nb89SRN6.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)}}@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) {
@@ -50,6 +50,7 @@ const AfClientCarousel = class {
     }
     get el() { return getElement(this); }
 };
-AfClientCarousel.style = afClientCarouselCss();
+AfClientCarousel.style = afClientCarouselCss;
 
 export { AfClientCarousel as af_client_carousel };
+//# sourceMappingURL=af-client-carousel.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-client-carousel.entry.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":[],"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,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,EAAE,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,sBAAA,EAAyB,IAAI,CAAC,KAAK,SAAS,IAAI,CAAA,CAAE,EAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,EAC3D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH,CACF,EAEL,IAAI,KAAK,CAAC,KACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,EAC3D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACP,CACG,CACF,CACD;;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CPfAC9fk.js';
+import { r as registerInstance, h } from './index-nb89SRN6.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}`;
+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}";
 
 const AfColorSwatch = class {
     constructor(hostRef) {
@@ -15,6 +15,7 @@ const AfColorSwatch = class {
             }, part: "base" }, h("div", { key: '505252d9fbfb36df24f1907cd5a30278e55bf268', class: "color-preview", part: "preview", style: { backgroundColor: this.color } }), h("div", { key: '095621914872670c129c23825aa012bbba4e33bb', class: "color-info", part: "info" }, h("div", { key: '86b6164f0aed4a938a8faa210651bbc6746dd4f2', class: "color-name", part: "name" }, this.name), h("div", { key: '1d533780d3756b119ae36a6e8fa0c2b6b3acb7b4', class: "color-value", part: "value" }, this.color))));
     }
 };
-AfColorSwatch.style = afColorSwatchCss();
+AfColorSwatch.style = afColorSwatchCss;
 
 export { AfColorSwatch as af_color_swatch };
+//# sourceMappingURL=af-color-swatch.entry.js.map

package/dist/esm/af-color-swatch.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-color-swatch.entry.js","sources":["src/components/af-color-swatch/af-color-swatch.css?tag=af-color-swatch&encapsulation=shadow","src/components/af-color-swatch/af-color-swatch.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.swatch {\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #ece6f5;\n  background: white;\n}\n\n.color-preview {\n  width: 100%;\n  height: 120px;\n  flex-shrink: 0;\n}\n\n.size-large .color-preview {\n  height: 140px;\n}\n\n.color-info {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.color-name {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  color: #14343B;\n}\n\n.color-value {\n  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;\n  font-size: 14px;\n  color: #708380;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,0gBAA0gB;;MCOthB,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAaU,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAoB9C;IAlBC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACV,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;aACxB,EAAE,IAAI,EAAC,MAAM,EAAA,EACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,EACjC,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CACpD,CACF;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.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}`;
+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}";
 
 const AfContactItem = class {
     constructor(hostRef) {
@@ -14,6 +14,7 @@ const AfContactItem = class {
         return (h(Host, { key: '1a52a5ea61e7ef04f3b86e8338ed6984a57101a2' }, h("div", { key: '9c69396e916f489d572f045e78daf990a72e0d24', class: "contact-item" }, this.label && (h("h5", { key: '7575301c7a83aa2034aaaf9b9bdb2a0bd5e072bb', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: '5cbca2b4420b2184fb08ac7f1edb22bce50b9c4c', class: "contact-item__value" }, this.value)), h("slot", { key: '45624be318ed9146a9ec0f2b81af110f8cb82ff6' }))));
     }
 };
-AfContactItem.style = afContactItemCss();
+AfContactItem.style = afContactItemCss;
 
 export { AfContactItem as af_contact_item };
+//# sourceMappingURL=af-contact-item.entry.js.map

package/dist/esm/af-contact-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-contact-item.entry.js","sources":["src/components/af-contact-item/af-contact-item.css?tag=af-contact-item&encapsulation=scoped","src/components/af-contact-item/af-contact-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.contact-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.contact-item__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.contact-item__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","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Contact item component for footer\n * Displays a label and value pair (e.g., \"Sales enquiries\" / \"contact@example.com\")\n */\n@Component({\n  tag: 'af-contact-item',\n  styleUrl: 'af-contact-item.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfContactItem {\n  /** Contact label (e.g., \"Sales enquiries\") */\n  @Prop() label: string = '';\n\n  /** Contact value (e.g., email address) */\n  @Prop() value: string = '';\n\n  render() {\n    return (\n      <Host>\n        <div class=\"contact-item\">\n          {this.label && (\n            <h5 class=\"contact-item__label\">{this.label}</h5>\n          )}\n          {this.value && (\n            <p class=\"contact-item__value\">{this.value}</p>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,oeAAoe;;MCYhf,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGlB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAiB3B;IAfC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,KAAK,KACT,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAM,CAClD,EACA,IAAI,CAAC,KAAK,KACT,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CAChD,EACD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CPfAC9fk.js';
+import { r as registerInstance, h } from './index-nb89SRN6.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}`;
+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}";
 
 const AfContainer = class {
     constructor(hostRef) {
@@ -18,6 +18,7 @@ const AfContainer = class {
         return (h("div", { key: '4a40fad6df79915adeb7273a7c71ed26b327ff8f', class: `container max-width-${this.maxWidth}` }, h("slot", { key: 'a1759c05860511cdb6b916e44925df7f7a80bcf1' })));
     }
 };
-AfContainer.style = afContainerCss();
+AfContainer.style = afContainerCss;
 
 export { AfContainer as af_container };
+//# sourceMappingURL=af-container.entry.js.map

package/dist/esm/af-container.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-container.entry.js","sources":["src/components/af-container/af-container.css?tag=af-container&encapsulation=shadow","src/components/af-container/af-container.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.container {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  box-sizing: border-box;\n\n  /* Mobile first: base padding (applies below 768px) */\n  padding-left: 20px;\n  padding-right: 20px;\n}\n\n/* ≥ mobile */\n/* Medium breakpoint (768px) */\n@media (min-width: 768px) {\n  .container {\n    padding-left: 32px;\n    padding-right: 32px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* ≥ tablet */\n/* Large breakpoint (1024px) */\n@media (min-width: 1024px) {\n  .container {\n    padding-left: 64px;\n    padding-right: 64px;\n  }\n\n  .max-width-large {\n    max-width: 1024px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* ≥ desktop-wide */\n/* XLarge breakpoint (1440px) */\n@media (min-width: 1440px) {\n  .container {\n    padding-left: 80px;\n    padding-right: 80px;\n  }\n\n  .max-width-xlarge {\n    max-width: 1440px;\n  }\n\n  .max-width-large {\n    max-width: 1024px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* Fluid has no max-width */\n.max-width-fluid {\n  max-width: none;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A responsive container component that provides consistent margins and max-width\n * constraints based on the Affinda grid system.\n */\n@Component({\n  tag: 'af-container',\n  styleUrl: 'af-container.css',\n  shadow: true\n})\nexport class AfContainer {\n  /**\n   * Maximum width constraint for the container\n   * - 'xlarge': 1440px container (default)\n   * - 'large': 1024px container\n   * - 'medium': 768px container\n   * - 'fluid': No max-width constraint, full width with margins\n   */\n  @Prop() maxWidth: 'xlarge' | 'large' | 'medium' | 'fluid' = 'xlarge';\n\n  render() {\n    return (\n      <div class={`container max-width-${this.maxWidth}`}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,qmBAAqmB;;MCW/mB,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AACK,QAAA,IAAQ,CAAA,QAAA,GAA4C,QAAQ;AASrE;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,QAAQ,CAAA,CAAE,EAAA,EAChD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.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}`;
+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}";
 
 const AfDivider = class {
     constructor(hostRef) {
@@ -35,6 +35,7 @@ const AfDivider = class {
             }, style: style, role: "separator", "aria-orientation": this.orientation }));
     }
 };
-AfDivider.style = afDividerCss();
+AfDivider.style = afDividerCss;
 
 export { AfDivider as af_divider };
+//# sourceMappingURL=af-divider.entry.js.map

package/dist/esm/af-divider.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-divider.entry.js","sources":["src/components/af-divider/af-divider.css?tag=af-divider&encapsulation=shadow","src/components/af-divider/af-divider.tsx"],"sourcesContent":[":host {\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(.divider--horizontal) {\n  display: block;\n  width: 100%;\n  height: 1px;\n  background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n}\n\n:host(.divider--vertical) {\n  display: inline-block;\n  width: 1px;\n  height: 100%;\n  min-height: 1em;\n  background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n  align-self: stretch;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Orientation = 'horizontal' | 'vertical';\ntype Spacing = 'none' | '1' | '2' | '3' | '4' | '5' | '6' | '8';\n\n/**\n * Divider component for visual separation between content.\n * Supports horizontal and vertical orientations with theme-aware styling.\n */\n@Component({\n  tag: 'af-divider',\n  styleUrl: 'af-divider.css',\n  shadow: true,\n})\nexport class AfDivider {\n  /**\n   * Orientation of the divider.\n   */\n  @Prop() orientation: Orientation = 'horizontal';\n\n  /**\n   * Spacing (margin) around the divider using space tokens.\n   * For horizontal: margin-top and margin-bottom\n   * For vertical: margin-left and margin-right\n   */\n  @Prop() spacing: Spacing = '4';\n\n  render() {\n    const isVertical = this.orientation === 'vertical';\n    const spacingValue = this.spacing === 'none' ? '0' : `var(--space-${this.spacing})`;\n\n    const style: Record<string, string> = isVertical\n      ? {\n          marginLeft: spacingValue,\n          marginRight: spacingValue,\n        }\n      : {\n          marginTop: spacingValue,\n          marginBottom: spacingValue,\n        };\n\n    return (\n      <Host\n        class={{\n          'divider': true,\n          'divider--horizontal': !isVertical,\n          'divider--vertical': isVertical,\n        }}\n        style={style}\n        role=\"separator\"\n        aria-orientation={this.orientation}\n      ></Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,oWAAoW;;MCc5W,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAgB,YAAY;AAE/C;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,GAAG;AA6B/B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,KAAK,UAAU;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG,CAAA,YAAA,EAAe,IAAI,CAAC,OAAO,GAAG;QAEnF,MAAM,KAAK,GAA2B;AACpC,cAAE;AACE,gBAAA,UAAU,EAAE,YAAY;AACxB,gBAAA,WAAW,EAAE,YAAY;AAC1B;AACH,cAAE;AACE,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,YAAY,EAAE,YAAY;aAC3B;QAEL,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;gBACf,qBAAqB,EAAE,CAAC,UAAU;AAClC,gBAAA,mBAAmB,EAAE,UAAU;AAChC,aAAA,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,IAAI,CAAC,WAAW,EAAA,CAC5B;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-nb89SRN6.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));--_level-1-bg:var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3))}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--_heading-color);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid var(--_border-color)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid var(--_border-color)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--_heading-color)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--_heading-color);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{opacity:0.7}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--_heading-color);transition:transform 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{opacity:0.5}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:var(--_body-color);margin:0 0 20px 0;padding-right:40px;opacity:0.85}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:var(--_border-color);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--colour-brand-ice, #a6fffb);border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:var(--_level-1-bg);border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:32px}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";
 
 const AfFeatureAccordion = class {
     constructor(hostRef) {
@@ -97,11 +97,10 @@ const AfFeatureAccordion = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "autoCycle": [{
-                "handleAutoCycleChange": 0
-            }]
+        "autoCycle": ["handleAutoCycleChange"]
     }; }
 };
-AfFeatureAccordion.style = afFeatureAccordionCss();
+AfFeatureAccordion.style = afFeatureAccordionCss;
 
 export { AfFeatureAccordion as af_feature_accordion };
+//# sourceMappingURL=af-feature-accordion.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-feature-accordion.entry.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":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.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}}`;
+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}}";
 
 const AfFeatureCard = class {
     constructor(hostRef) {
@@ -51,6 +51,7 @@ const AfFeatureCard = class {
         return (h(Host, null, h("div", { class: wrapperClasses }, h("af-card", { theme: this.theme, stretch: isFlexible }, h("div", { class: "feature-card__content" }, h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", null), h("span", { slot: "description" }, h("slot", { name: "body" })))), hasImage && (h("div", { class: "feature-card__image-area" }, h("img", { src: this.imageSrc, alt: this.imageAlt, class: "feature-card__image" })))))));
     }
 };
-AfFeatureCard.style = afFeatureCardCss();
+AfFeatureCard.style = afFeatureCardCss;
 
 export { AfFeatureCard as af_feature_card };
+//# sourceMappingURL=af-feature-card.entry.js.map

package/dist/esm/af-feature-card.entry.js.map

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

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-nb89SRN6.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)}}`;
+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)}}";
 
 const AfFeatureGrid = class {
     constructor(hostRef) {
@@ -82,11 +82,10 @@ const AfFeatureGrid = class {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "mobileLayout": [{
-                "onMobileLayoutChange": 0
-            }]
+        "mobileLayout": ["onMobileLayoutChange"]
     }; }
 };
-AfFeatureGrid.style = afFeatureGridCss();
+AfFeatureGrid.style = afFeatureGridCss;
 
 export { AfFeatureGrid as af_feature_grid };
+//# sourceMappingURL=af-feature-grid.entry.js.map

package/dist/esm/af-feature-grid.entry.js.map

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

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.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%}`;
+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%}";
 
 const AfFieldset = class {
     constructor(hostRef) {
@@ -29,6 +29,7 @@ const AfFieldset = class {
         return (h(Host, { key: '907af09a079116df5906d3ee63454c6d788e98f9' }, h("fieldset", { key: '30396861eb6e071b740edcfcbe79b08a8f94ccac', class: fieldsetClasses, disabled: this.disabled }, this.legend && (h("legend", { key: 'c4e3f1936945e5cdaa9d7a735970fd06926fe2e5', class: "legend" }, this.legend)), h("div", { key: 'a3a2446d6f061bab988ef2dcbe1721d650fb4823', class: itemsClasses }, h("slot", { key: '1aec6fa9ab398e634c0b3eec3d5287a206609bfe' })))));
     }
 };
-AfFieldset.style = afFieldsetCss();
+AfFieldset.style = afFieldsetCss;
 
 export { AfFieldset as af_fieldset };
+//# sourceMappingURL=af-fieldset.entry.js.map

package/dist/esm/af-fieldset.entry.js.map

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

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.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}`;
+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}";
 
 const AfFooterColumn = class {
     constructor(hostRef) {
@@ -12,6 +12,7 @@ const AfFooterColumn = class {
         return (h(Host, { key: 'aff327dcb95b40e2835062053b7e59ee38d1e251' }, h("div", { key: '1f08aa09e7ffc52dda5603f5b3a1bb8ab8b42426', class: "footer-column" }, this.heading && (h("h5", { key: 'ef2532c50e755acb21f786edfbc23ade0097e385', class: "footer-column__heading" }, this.heading)), h("ul", { key: 'c96d5cda9bef99805eb17af7689a294adf80e33b', class: "footer-column__list" }, h("slot", { key: '5efdffcd7fc885e71a9460bc21a2d40bf486c14d' })))));
     }
 };
-AfFooterColumn.style = afFooterColumnCss();
+AfFooterColumn.style = afFooterColumnCss;
 
 export { AfFooterColumn as af_footer_column };
+//# sourceMappingURL=af-footer-column.entry.js.map

package/dist/esm/af-footer-column.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-footer-column.entry.js","sources":["src/components/af-footer-column/af-footer-column.css?tag=af-footer-column&encapsulation=scoped","src/components/af-footer-column/af-footer-column.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.footer-column {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer-column__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-column__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-column__list ::slotted(li) {\n  margin: 0;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Footer navigation column component\n * Used within af-footer to create navigation link groups\n */\n@Component({\n  tag: 'af-footer-column',\n  styleUrl: 'af-footer-column.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFooterColumn {\n  /** Column heading */\n  @Prop() heading: string = '';\n\n  render() {\n    return (\n      <Host>\n        <div class=\"footer-column\">\n          {this.heading && (\n            <h5 class=\"footer-column__heading\">{this.heading}</h5>\n          )}\n          <ul class=\"footer-column__list\">\n            <slot></slot>\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,8iBAA8iB;;MCY3jB,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;AAgB7B;IAdC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,OAAO,KACX,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAE,EAAA,IAAI,CAAC,OAAO,CAAM,CACvD,EACD,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACV,CACD,CACD;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.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}`;
+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}";
 
 const AfFooterLink = class {
     constructor(hostRef) {
@@ -14,6 +14,7 @@ const AfFooterLink = class {
         return (h(Host, { key: '6a353087c08983e0e8a962ba97a2d1fa0afd1003' }, h("li", { key: '746175585030c809e05bd697a518f0ae0bc93d89' }, h("a", { key: '5409787ffbcd34661bbcd643fe68ba2e8354d127', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '506e4056466d3764b4a2a55927932ad5fe5ea0ba' }), this.external && (h("svg", { key: '93e6405e6252095281d63cfbcf1548af54582c24', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '72370b0a31dccb15f92bf8fa67fa868e2f0f33ee', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
 };
-AfFooterLink.style = afFooterLinkCss();
+AfFooterLink.style = afFooterLinkCss;
 
 export { AfFooterLink as af_footer_link };
+//# sourceMappingURL=af-footer-link.entry.js.map

package/dist/esm/af-footer-link.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-footer-link.entry.js","sources":["src/components/af-footer-link/af-footer-link.css?tag=af-footer-link&encapsulation=scoped","src/components/af-footer-link/af-footer-link.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\nli {\n  margin: 0;\n  list-style: none;\n}\n\n.footer-link {\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-link:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n}\n\n.footer-link__external-icon {\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Footer link component\n * Styled link for use in footer navigation columns\n */\n@Component({\n  tag: 'af-footer-link',\n  styleUrl: 'af-footer-link.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFooterLink {\n  /** Link URL */\n  @Prop() href: string = '#';\n\n  /** Whether this is an external link (opens in new tab) */\n  @Prop() external: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <li>\n          <a \n            href={this.href} \n            class=\"footer-link\"\n            target={this.external ? '_blank' : undefined}\n            rel={this.external ? 'noopener noreferrer' : undefined}\n          >\n            <slot></slot>\n            {this.external && (\n              <svg class=\"footer-link__external-icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            )}\n          </a>\n        </li>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,ifAAif;;MCY5f,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;;AAGlB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAuBlC;IArBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,aAAa,EACnB,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,SAAS,EAAA,EAEtD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,qFAAqF,EAAC,MAAM,EAAC,cAAc,kBAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,GAAE,CACnL,CACP,CACC,CACD,CACA;;;;;;;"}