@affinda/wc 0.0.15 → 0.0.16

package/dist/affinda/af-nav-menu.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-nav-menu.entry.esm.js","sources":["src/components/af-nav-menu/af-nav-menu.css?tag=af-nav-menu&encapsulation=shadow","src/components/af-nav-menu/af-nav-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.nav-menu {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  align-items: flex-start;\n  min-height: 1px;\n  min-width: 1px;\n}\n\n/* Desktop styles */\n.nav-menu.breakpoint-desktop {\n  padding: 0;\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n/* Border is now controlled by parent NavMenuNest via ::slotted()\n   Use showBorder prop only when NavMenu is used standalone */\n.nav-menu.breakpoint-desktop.has-border {\n  border-right: 1px solid var(--colour-background-border-subtle, #e8eeed);\n  padding-right: 32px;\n  padding-top: 16px;\n}\n\n/* Mobile styles */\n.nav-menu.breakpoint-mobile {\n  padding: 32px 12px;\n  width: 100%;\n  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);\n}\n\n/* Menu header */\n.menu-header {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  width: 100%;\n}\n\n.menu-heading {\n  margin: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 20px;\n  line-height: 1.2;\n  letter-spacing: -0.4px;\n  color: var(--colour-typography-heading-secondary, #8a7049);\n  flex: 1 0 0;\n  min-height: 1px;\n  min-width: 1px;\n}\n\n/* Mobile heading adjustments */\n.nav-menu.breakpoint-mobile .menu-heading {\n  line-height: 1.1;\n}\n\n/* Menu items container */\n.menu-items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n}\n\n/* Mobile items with left padding */\n.nav-menu.breakpoint-mobile .menu-items {\n  padding-left: 24px;\n}\n\n/* Slot styling for nav-items */\n::slotted(af-nav-item) {\n  width: 100%;\n}\n\n/* Card style variant - adds background and rounded corners */\n.nav-menu.card-style {\n  background: var(--colour-background-level-1, #e8eeed);\n  border-radius: var(--radii-card-level-1, 32px);\n  padding: 40px;\n}\n\n.nav-menu.card-style.breakpoint-desktop {\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A grouped navigation menu component with a heading.\n * Used in mega-menu dropdowns to group related navigation items.\n */\n@Component({\n  tag: 'af-nav-menu',\n  styleUrl: 'af-nav-menu.css',\n  shadow: true\n})\nexport class AfNavMenu {\n  /**\n   * The heading text displayed above the navigation items\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles (right border, horizontal padding)\n   * - 'mobile': Mobile-specific styles (bottom border, vertical layout)\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the right border separator.\n   * When used inside NavMenuNest, borders are controlled by the parent.\n   * Set to true only when using NavMenu standalone.\n   */\n  @Prop() showBorder: boolean = false;\n\n  /**\n   * Whether to display as a card with background color and rounded corners.\n   * Used for highlighted sidebar menus (e.g., solutions-alt variant).\n   */\n  @Prop({ reflect: true }) cardStyle: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-menu': true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'has-border': this.showBorder,\n      'card-style': this.cardStyle\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"menu-header\">\n              <h3 class=\"menu-heading\">{this.heading}</h3>\n            </div>\n          )}\n          <div class=\"menu-items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,wvCAAwvC;;MCWhwC,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;;AAGG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAyBpD;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;YACvC,YAAY,EAAE,IAAI,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,IAAI,CAAC,OAAO,KACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}

package/dist/affinda/af-number-badge.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-number-badge.entry.esm.js","sources":["src/components/af-number-badge/af-number-badge.css?tag=af-number-badge&encapsulation=shadow","src/components/af-number-badge/af-number-badge.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);\n  font-weight: 500;\n}\n\n/* In Circle variant - filled soft-clay circle */\n.badge.variant-inCircle {\n  border-radius: 50%;\n  background-color: var(--af-color-brand-soft-clay, #B09670);\n  color: var(--af-color-brand-inkwell, #14343B);\n}\n\n/* Outlined variant - text only in mist-green */\n.badge.variant-outlined {\n  background-color: transparent;\n  color: var(--af-color-brand-mist-green, #C6D5D1);\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type NumberBadgeNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\nexport type NumberBadgeVariant = 'inCircle' | 'outlined';\n\n/**\n * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.\n * Perfect for numbered lists, step indicators, or ordered content.\n * \n * @example\n * ```html\n * <af-number-badge number=\"1\" variant=\"inCircle\" size=\"48\"></af-number-badge>\n * <af-number-badge number=\"5\" variant=\"outlined\" size=\"32\"></af-number-badge>\n * ```\n */\n@Component({\n  tag: 'af-number-badge',\n  styleUrl: 'af-number-badge.css',\n  shadow: true\n})\nexport class AfNumberBadge {\n  /**\n   * The number to display (1-10)\n   */\n  @Prop() number: NumberBadgeNumber = 1;\n\n  /**\n   * Visual variant of the badge\n   * - `inCircle` - Number in filled soft-clay circle\n   * - `outlined` - Number text only in mist-green\n   */\n  @Prop() variant: NumberBadgeVariant = 'inCircle';\n\n  /**\n   * Size of the badge in pixels\n   */\n  @Prop() size: number = 48;\n\n  render() {\n    const isInCircle = this.variant === 'inCircle';\n    const fontSize = isInCircle ? this.size * 0.4 : this.size * 0.8;\n\n    const badgeStyle = {\n      width: `${this.size}px`,\n      height: `${this.size}px`,\n      fontSize: `${fontSize}px`,\n    };\n\n    return (\n      <Host\n        role=\"img\"\n        aria-label={`Number ${this.number}${isInCircle ? ' badge' : ''}`}\n      >\n        <span\n          class={{\n            'badge': true,\n            [`variant-${this.variant}`]: true,\n          }}\n          style={badgeStyle}\n        >\n          {this.number}\n        </span>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,mgBAAmgB;;MCoB/gB,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAsB,CAAC;AAErC;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,UAAU;AAEhD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA6B1B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU;AAC9C,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG;AAE/D,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;AACvB,YAAA,MAAM,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;YACxB,QAAQ,EAAE,CAAG,EAAA,QAAQ,CAAI,EAAA,CAAA;SAC1B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,KAAK,EACE,YAAA,EAAA,CAAU,OAAA,EAAA,IAAI,CAAC,MAAM,CAAA,EAAG,UAAU,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAA,EAEhE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAClC,EACD,KAAK,EAAE,UAAU,EAEhB,EAAA,IAAI,CAAC,MAAM,CACP,CACF;;;;;;;"}

package/dist/affinda/af-progress-line.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-progress-line.entry.esm.js","sources":["src/components/af-progress-line/af-progress-line.css?tag=af-progress-line&encapsulation=scoped","src/components/af-progress-line/af-progress-line.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Progress Line Base Styles\n   ========================================================================== */\n\n.progress-line {\n  position: relative;\n  overflow: hidden;\n}\n\n.progress-line--horizontal {\n  height: 3px;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Background Track\n   ========================================================================== */\n\n.progress-line__background {\n  position: absolute;\n  inset: 0;\n  background: var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));\n  height: 1px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* ==========================================================================\n   Active Progress\n   ========================================================================== */\n\n.progress-line__active {\n  position: relative;\n  height: 100%;\n  min-width: 1px;\n  background: var(--af-background-border-active, var(--colour-background-border-active, #8a7049));\n  transition: width 0.15s ease-out;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Progress Line atom component for displaying scroll or completion progress.\n * \n * Shows a horizontal bar with a filled portion indicating progress.\n * Used primarily for carousel scroll indicators.\n */\n@Component({\n  tag: 'af-progress-line',\n  styleUrl: 'af-progress-line.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfProgressLine {\n  /**\n   * Progress value from 0 to 1 (0 = 0%, 1 = 100%).\n   */\n  @Prop() progress: number = 0;\n\n  /**\n   * Orientation of the progress line.\n   * Currently only horizontal is supported.\n   */\n  @Prop() orientation: 'horizontal' = 'horizontal';\n\n  render() {\n    // Clamp progress between 0 and 1\n    const clampedProgress = Math.max(0, Math.min(1, this.progress));\n    const progressPercent = clampedProgress * 100;\n\n    return (\n      <Host>\n        <div\n          class={{\n            'progress-line': true,\n            [`progress-line--${this.orientation}`]: true,\n          }}\n          role=\"progressbar\"\n          aria-valuenow={Math.round(progressPercent)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n        >\n          <div class=\"progress-line__background\" />\n          <div\n            class=\"progress-line__active\"\n            style={{ width: `${progressPercent}%` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,0mBAA0mB;;MCcvnB,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAE5B;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAiB,YAAY;AA4BjD;IA1BC,MAAM,GAAA;;AAEJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC/D,QAAA,MAAM,eAAe,GAAG,eAAe,GAAG,GAAG;QAE7C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AAC7C,aAAA,EACD,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAC3B,eAAA,EAAA,CAAC,mBACD,GAAG,EAAA,EAElB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAG,CAAA,EACzC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,eAAe,CAAG,CAAA,CAAA,EAAE,GACvC,CACE,CACD;;;;;;;"}

package/dist/affinda/af-radio.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-radio.entry.esm.js","sources":["src/components/af-radio/af-radio.css?tag=af-radio&encapsulation=shadow","src/components/af-radio/af-radio.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.radio {\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(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.radio.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 radio control */\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-radio, 9999px);\n  border: 1px solid var(--forms-control-stroke, #d0d6d8);\n  background: var(--forms-control-bg-default, #ffffff);\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked state */\n.control.checked {\n  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n  border-color: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n  border-color: var(--forms-control-stroke-disabled, #d0d6d8);\n}\n\n.control.checked.disabled {\n  background: var(--forms-control-bg-active-disabled, #708380);\n  border-color: var(--forms-control-bg-active-disabled, #708380);\n}\n\n/* Hover state */\n.radio:not(.disabled):hover .control {\n  border-color: var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n  outline: none;\n}\n\n/* Inner dot */\n.dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #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\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string }>;\n\n  private handleChange = () => {\n    if (this.disabled || this.checked) return;\n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses}>\n          <input\n            type=\"radio\"\n            class=\"input\"\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 && (\n              <span class=\"dot\"></span>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,umDAAumD;;MCY7mD,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACqC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE;AACnC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAClE,SAAC;AAuCF;IArCC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACxB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,cAAc,EAAA,EACxB,IAAI,CAAC,OAAO,KACX,6DAAM,KAAK,EAAC,KAAK,EAAA,CAAQ,CAC1B,CACI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;"}

package/dist/affinda/af-section.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-section.entry.esm.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.section {\n  width: 100%;\n  position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n  background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n  background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  --colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);\n  --colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Automatic contrast overrides for dark sections */\n.bg-dark af-heading::part(base),\n.bg-inkwell af-heading::part(base) {\n  color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.bg-dark af-text::part(base),\n.bg-inkwell af-text::part(base) {\n  color: var(--colour-brand-mist-green, #C6D5D1);\n  opacity: 0.92;\n}\n\n.bg-dark af-typography-lockup::part(heading),\n.bg-inkwell af-typography-lockup::part(heading),\n.bg-dark af-typography-lockup::part(body),\n.bg-inkwell af-typography-lockup::part(body) {\n  color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Background color */\n  @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} bg-${this.background}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,0hEAA0hE;;MCWliE,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAU,CAAA,UAAA,GAA4C,OAAO;;AAG7D,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAO,IAAA,EAAA,IAAI,CAAC,UAAU,CAAA,CAAE,EAAA,EAChE,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}
+{"version":3,"file":"af-section.entry.esm.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":["/**\n * Section Component Styles\n * \n * Provides themed containers with proper spacing.\n * Theme classes set CSS custom properties that child components consume.\n */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.section {\n  width: 100%;\n  position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n   WHITE THEME\n   ========================================================================== */\n\n.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-white, #FFFFFF);\n  --af-background-base-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-level-1-hover: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-border-subtle: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-border-default: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-heavy: var(--colour-mistgreen-500, #c6d5d1);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);\n}\n\n/* ==========================================================================\n   INKWELL THEME (Dark)\n   ========================================================================== */\n\n.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-inkwell, #14343b);\n  --af-background-base-hover: var(--colour-inkwell-600, #102a2f);\n  --af-background-contrast: var(--colour-inkwell-700, #102a2f);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  --af-background-level-1-hover: var(--colour-inkwell-400, #2b484f);\n  --af-background-border-subtle: var(--colour-inkwell-450, #203e45);\n  --af-background-border-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-border-heavy: var(--colour-inkwell-700, #102a2f);\n  --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-background-icon-default: var(--colour-brand-white, #ffffff);\n  --af-background-icon-accent: var(--colour-brand-ice, #a6fffb);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);\n  --af-typography-body-dark: var(--colour-brand-white, #ffffff);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);\n}\n\n/* ==========================================================================\n   MIST-GREEN THEME\n   ========================================================================== */\n\n.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-base-hover: var(--colour-mistgreen-600, #b2c0bc);\n  --af-background-contrast: var(--colour-brand-soft-clay, #b09670);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-level-1-hover: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-subtle: var(--colour-mistgreen-600, #b2c0bc);\n  --af-background-border-default: var(--colour-mistgreen-700, #9eaaa7);\n  --af-background-border-heavy: var(--colour-mistgreen-700, #9eaaa7);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);\n}\n\n/* ==========================================================================\n   SOFT-CLAY THEME\n   ========================================================================== */\n\n.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-softclay-400, #c0ab8d);\n  --af-background-base-hover: var(--colour-softclay-500, #b09670);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n  --af-background-level-1-hover: var(--colour-softclay-600, #9e8765);\n  --af-background-border-subtle: var(--colour-softclay-600, #9e8765);\n  --af-background-border-default: var(--colour-softclay-700, #8d785a);\n  --af-background-border-heavy: var(--colour-brand-inkwell, #14343b);\n  --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   WHITE-IVORY THEME\n   ========================================================================== */\n\n.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-background-base-hover: var(--colour-ivory-100, #fff5e0);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n  --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);\n  --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);\n  --af-background-border-default: var(--colour-ivory-400, #ffe3a3);\n  --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);\n  --af-background-border-active: var(--colour-brand-soft-clay, #b09670);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} theme-${this.theme}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,2qTAA2qT;;MCYnrT,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;;AAGjF,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAC9D,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}

package/dist/affinda/af-split-section.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-split-section.entry.esm.js","sources":["src/components/af-split-section/af-split-section.css?tag=af-split-section&encapsulation=scoped","src/components/af-split-section/af-split-section.tsx"],"sourcesContent":["/* Theme CSS custom properties are loaded globally from @affinda/css */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.split-section {\n  position: relative;\n  width: 100%;\n  /* Background is set via inline style with linear-gradient */\n}\n\n/* ==========================================================================\n   Padding Variants\n   ========================================================================== */\n\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n   Mobile Adjustments\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n// Map theme names to CSS color values\nconst themeColors: Record<Theme, string> = {\n  'white': 'var(--colour-brand-white, #FFFFFF)',\n  'inkwell': 'var(--colour-brand-inkwell, #14343B)',\n  'mist-green': 'var(--colour-brand-mist-green, #C6D5D1)',\n  'soft-clay': 'var(--colour-softclay-400, #c0ab8d)',\n  'white-ivory': 'var(--colour-brand-ivory-paper, #fff9ee)',\n};\n\n/**\n * Split Section component for layouts with two-tone backgrounds.\n * Creates a vertical split with different themes for top and bottom halves.\n * Useful for content that visually spans across two themed areas.\n * \n * Uses a CSS linear-gradient for the split background effect.\n */\n@Component({\n  tag: 'af-split-section',\n  styleUrl: 'af-split-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSplitSection {\n  /** Theme for the top half of the section */\n  @Prop() topTheme: Theme = 'mist-green';\n\n  /** Theme for the bottom half of the section */\n  @Prop() bottomTheme: Theme = 'white';\n\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n\n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    // Create the split background using CSS gradient\n    const topColor = themeColors[this.topTheme];\n    const bottomColor = themeColors[this.bottomTheme];\n    const backgroundStyle = {\n      background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`\n    };\n\n    return (\n      <Host>\n        <div\n          class={`split-section padding-${this.padding} top-theme-${this.topTheme}`}\n          style={backgroundStyle}\n        >\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,wcAAwc;;ACIle;AACA,MAAM,WAAW,GAA0B;AACzC,IAAA,OAAO,EAAE,oCAAoC;AAC7C,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,YAAY,EAAE,yCAAyC;AACvD,IAAA,WAAW,EAAE,qCAAqC;AAClD,IAAA,aAAa,EAAE,0CAA0C;CAC1D;MAeY,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAU,YAAY;;AAG9B,QAAA,IAAW,CAAA,WAAA,GAAU,OAAO;;AAG5B,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAyBlC;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;;QAG7B,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC3C,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;AACjD,QAAA,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,8BAA8B,QAAQ,CAAA,KAAA,EAAQ,QAAQ,CAAS,MAAA,EAAA,WAAW,CAAS,MAAA,EAAA,WAAW,CAAQ,MAAA;SACnH;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAyB,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,EACzE,KAAK,EAAE,eAAe,EAErB,EAAA,IAAI,CAAC,SAAS,IACb,wBAAe,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}

package/dist/affinda/af-switch.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-switch.entry.esm.js","sources":["src/components/af-switch/af-switch.css?tag=af-switch&encapsulation=shadow","src/components/af-switch/af-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.switch {\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(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.switch.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/* Switch track */\n.track {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 52px;\n  height: 30px;\n  border-radius: var(--radii-switch, 9999px);\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n  transition: background 0.2s ease;\n  box-sizing: border-box;\n}\n\n/* Track active state */\n.track.active {\n  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Track disabled state */\n.track.disabled {\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n}\n\n/* Hover state */\n.switch:not(.disabled):hover .track:not(.active) {\n  background: #d0d6d8;\n}\n\n/* Focus state */\n.input:focus-visible + .track {\n  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n  outline: none;\n}\n\n/* Switch knob */\n.knob {\n  position: absolute;\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s ease, background 0.2s ease;\n  transform: translateX(2px);\n}\n\n/* Knob active position */\n.knob.active {\n  transform: translateX(24px);\n}\n\n/* Knob disabled state */\n.knob.disabled {\n  background: var(--forms-control-stroke-disabled, #a1aeb1);\n  box-shadow: none;\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\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n  tag: 'af-switch',\n  styleUrl: 'af-switch.css',\n  shadow: true\n})\nexport class AfSwitch {\n  /**\n   * Whether the switch is active (on)\n   */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the switch for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the switch for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the switch state changes\n   */\n  @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.active = !this.active;\n    this.afChange.emit({ active: this.active });\n  };\n\n  render() {\n    const switchClasses = {\n      'switch': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const trackClasses = {\n      'track': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const knobClasses = {\n      'knob': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={switchClasses}>\n          <input\n            type=\"checkbox\"\n            role=\"switch\"\n            class=\"input\"\n            checked={this.active}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={trackClasses}>\n            <span class={knobClasses}></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,2+CAA2+C;;MCYl/C,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC7C,SAAC;AA4CF;IA1CC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAA,EACzB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,WAAW,EAAA,CAAS,CAC5B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;"}

package/dist/affinda/af-tab-bar.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-tab-bar.entry.esm.js","sources":["src/components/af-tab-bar/af-tab-bar.css?tag=af-tab-bar&encapsulation=shadow","src/components/af-tab-bar/af-tab-bar.tsx"],"sourcesContent":["/* TabBar component styles */\n:host {\n  display: block;\n  width: 100%;\n}\n\n.tab-bar {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);\n}\n\n/* Custom scrollbar for WebKit browsers */\n.tab-bar::-webkit-scrollbar {\n  height: 4px;\n}\n\n.tab-bar::-webkit-scrollbar-track {\n  background: var(--af-scrollbar-track, #d1ddda);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb {\n  background: var(--af-scrollbar-thumb, #8a7049);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb:hover {\n  background: var(--af-scrollbar-thumb-hover, #8d785a);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab-bar.shape-square {\n  gap: 0;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab-bar.shape-pill {\n  gap: 0;\n  padding: var(--space-2, 8px);\n  background-color: var(--af-background-level-1, #e8eeed);\n  border-radius: var(--radius-pill, 999px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: MOBILE\n   ========================================================================== */\n\n.tab-bar.breakpoint-mobile {\n  /* Mobile uses compact spacing */\n}\n\n.tab-bar.breakpoint-mobile.shape-square {\n  /* Tabs handle their own padding in mobile */\n}\n\n.tab-bar.breakpoint-mobile.shape-pill {\n  padding: var(--space-1, 4px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: DESKTOP\n   ========================================================================== */\n\n.tab-bar.breakpoint-desktop {\n  /* Desktop uses more generous spacing */\n}\n\n.tab-bar.breakpoint-desktop.shape-square {\n  /* Tabs handle their own padding in desktop mode */\n}\n\n.tab-bar.breakpoint-desktop.shape-pill {\n  padding: var(--space-2, 8px);\n}\n\n","import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' | 'pill';\nexport type TabBarBreakpoint = 'mobile' | 'desktop';\n\n/**\n * TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n *   <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n *   <af-tab label=\"Details\" value=\"details\"></af-tab>\n *   <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n */\n@Component({\n  tag: 'af-tab-bar',\n  styleUrl: 'af-tab-bar.css',\n  shadow: true\n})\nexport class AfTabBar {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual shape variant for all tabs\n   * - `square` - Rectangular tabs with bottom border indicator\n   * - `pill` - Rounded pill tabs with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n  /**\n   * Responsive breakpoint mode\n   * - `mobile` - Compact layout with smaller padding\n   * - `desktop` - Larger layout with more generous spacing\n   */\n  @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n  componentDidLoad() {\n    this.syncChildProps();\n  }\n\n  componentDidUpdate() {\n    this.syncChildProps();\n  }\n\n  /**\n   * Sync shape and breakpoint props to child af-tab elements\n   */\n  private syncChildProps() {\n    const tabs = this.el.querySelectorAll('af-tab');\n    tabs.forEach((tab) => {\n      tab.setAttribute('shape', this.shape);\n      tab.setAttribute('data-breakpoint', this.breakpoint);\n    });\n  }\n\n  /**\n   * Handle keyboard navigation between tabs\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n    const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);\n    \n    if (currentIndex === -1) return;\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    // Focus the button inside the shadow DOM of the tab\n    const targetTab = tabs[newIndex];\n    const button = targetTab.shadowRoot?.querySelector('button');\n    if (button) {\n      button.focus();\n    }\n  }\n\n  render() {\n    const containerClasses = {\n      'tab-bar': true,\n      [`shape-${this.shape}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n    };\n\n    return (\n      <Host role=\"tablist\">\n        <div class={containerClasses}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAgB,QAAQ;AAEtD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAqB,SAAS;AA6ElE;IA3EC,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;IACK,cAAc,GAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACnB,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;YACrC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC;AACtD,SAAC,CAAC;;AAGJ;;AAEG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;QAC5F,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,QAAQ,CAAC,aAAa,IAAI,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC;QAE3G,IAAI,YAAY,KAAK,EAAE;YAAE;QAEzB,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC1B;AACF,YAAA;gBACE;;;AAIJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC;QAC5D,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE;;;IAIlB,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;SACxC;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;"}

package/dist/affinda/af-tab.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-tab.entry.esm.js","sources":["src/components/af-tab/af-tab.css?tag=af-tab&encapsulation=shadow","src/components/af-tab/af-tab.tsx"],"sourcesContent":["/* Tab component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-label-button, 17px);\n  line-height: var(--line-height-label-button, 20px);\n  text-align: center;\n  transition: \n    color 0.15s ease,\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease;\n}\n\n.tab:focus {\n  outline: none;\n}\n\n.tab:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, #ffffff),\n    0 0 0 5px var(--af-background-border-active, #8a7049);\n}\n\n/* ==========================================================================\n   SLOTS\n   ========================================================================== */\n\n.icon-slot,\n.number-slot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.number-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  padding: 0 var(--space-3, 12px);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab.shape-square {\n  padding: var(--space-3, 12px);\n  border-radius: 0;\n  overflow: hidden;\n  border-bottom: 3px solid transparent;\n}\n\n/* Square - Default state */\n.tab.shape-square:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  border-bottom-color: var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Square - Hover state */\n.tab.shape-square:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-default, #d1ddda);\n}\n\n/* Square - Active state */\n.tab.shape-square.active {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-active, #8a7049);\n}\n\n/* Square - Disabled state */\n.tab.shape-square.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  border-bottom-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Square - Icon colors */\n.tab.shape-square:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-square.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n  border-radius: var(--radius-pill, 999px);\n  overflow: hidden;\n}\n\n/* Pill - Default state */\n.tab.shape-pill:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  background-color: transparent;\n}\n\n/* Pill - Hover state */\n.tab.shape-pill:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-level-1-hover, #dde6e3);\n}\n\n/* Pill - Active state */\n.tab.shape-pill.active {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-base, #ffffff);\n  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);\n}\n\n/* Pill - Disabled state */\n.tab.shape-pill.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  background-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Pill - Icon colors */\n.tab.shape-pill:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-pill.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   DESKTOP BREAKPOINT ADJUSTMENTS\n   Tabs in desktop mode get larger padding via the tab-bar parent\n   These are applied via CSS custom properties set by af-tab-bar\n   ========================================================================== */\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-square {\n  padding: var(--space-6, 24px) var(--space-5, 20px);\n  border-bottom-width: 4px;\n}\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n *   <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n *   <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n  tag: 'af-tab',\n  styleUrl: 'af-tab.css',\n  shadow: true\n})\nexport class AfTab {\n  /**\n   * The text label for the tab\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Whether the tab is currently active/selected\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Visual shape variant\n   * - `square` - Rectangular tab with bottom border indicator\n   * - `pill` - Rounded pill shape with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabShape = 'square';\n\n  /**\n   * Whether to show the icon slot\n   */\n  @Prop() displayIcon: boolean = false;\n\n  /**\n   * Whether to show the number badge slot\n   */\n  @Prop() displayNumber: boolean = false;\n\n  /**\n   * Unique value for the tab, used for programmatic selection\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the tab is clicked\n   */\n  @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    this.afTabClick.emit({ value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.afTabClick.emit({ value: this.value });\n    }\n  };\n\n  render() {\n    const tabClasses = {\n      'tab': true,\n      'active': this.active,\n      'disabled': this.disabled,\n      [`shape-${this.shape}`]: true,\n    };\n\n    return (\n      <Host>\n        <button\n          class={tabClasses}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n        >\n          {this.displayNumber && (\n            <span class=\"number-slot\">\n              <slot name=\"number\" />\n            </span>\n          )}\n          {this.displayIcon && (\n            <span class=\"icon-slot\">\n              <slot name=\"icon\" />\n            </span>\n          )}\n          <span class=\"label\">{this.label}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,8nGAA8nG;;MC2BloG,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAa,QAAQ;AAEnD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAY9B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC7C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;SAC9B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,aAAa,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACR,EACA,IAAI,CAAC,WAAW,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACf,CACR,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ;;;;;;;"}

package/dist/affinda/af-tag.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-tag.entry.esm.js","sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\n/* Make links look clickable */\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: SAND (Soft-clay/tan colored - default)\n   ========================================================================== */\n\n.tag.variant-sand {\n  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-sand:hover {\n  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   VARIANT: LIGHT (Mist-green/light colored)\n   ========================================================================== */\n\n.tag.variant-light {\n  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));\n  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-light:hover {\n  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n/* Size: X-Small */\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Small */\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Large */\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n/* Focus state */\n.tag:focus {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus visible for keyboard navigation */\n.tag:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'sand' | 'light';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n * \n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"light\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * The visual variant of the tag\n   * - `sand` - Soft-clay/tan colored background (default)\n   * - `light` - Mist-green/light colored background\n   */\n  @Prop() variant: TagVariant = 'sand';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,2hDAA2hD;;MCqB/hD,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,MAAM;AA0BrC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;"}

package/dist/affinda/af-testimonial-carousel.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-testimonial-carousel.entry.esm.js","sources":["src/components/af-testimonial-carousel/af-testimonial-carousel.css?tag=af-testimonial-carousel&encapsulation=scoped","src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n}\n\n.testimonial-carousel {\n  position: relative;\n  width: 100%;\n}\n\n.testimonial-slides {\n  position: relative;\n  width: 100%;\n  min-height: 544px;\n  overflow: hidden;\n}\n\n.testimonial-slides ::slotted(af-testimonial) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;\n}\n\n/* Progress indicator */\n.testimonial-progress {\n  display: flex;\n  gap: 12px;\n  justify-content: center;\n  margin-top: 32px;\n  padding: 0 220px;\n}\n\n.progress-dot {\n  width: 100%;\n  max-width: 840px;\n  height: 3px;\n  background: var(--colour-background-border-default, #d1ddda);\n  border-radius: 2px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.progress-dot.active {\n  background: var(--colour-background-border-active, #8a7049);\n}\n\n.progress-dot:hover:not(.active) {\n  background: var(--colour-background-border-default, #c1cdc9);\n}\n\n/* Navigation buttons - positioned bottom left of content area (not on image) */\n.carousel-navigation {\n  position: absolute;\n  bottom: 48px;\n  left: 50%;\n  margin-left: 48px;\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  z-index: 10;\n}\n\n.nav-button {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.nav-button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n  transform: translateY(-2px);\n}\n\n.nav-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  border-color: var(--colour-brand-inkwell, #14343b);\n}\n\n.nav-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n","import { Component, State, h, Host, Element } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-carousel',\n  styleUrl: 'af-testimonial-carousel.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialCarousel {\n  @Element() host!: HTMLElement;\n  @State() currentIndex: number = 0;\n  @State() isAnimating: boolean = false;\n  @State() testimonialCount: number = 0;\n\n  private testimonials: HTMLElement[] = [];\n  private observer: MutationObserver | undefined;\n\n  componentDidLoad() {\n    this.detectTestimonials();\n    \n    // Watch for testimonials being added (for React async rendering)\n    this.observer = new MutationObserver(() => {\n      this.detectTestimonials();\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  }\n\n  private detectTestimonials() {\n    const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial')) as HTMLElement[];\n    \n    if (newTestimonials.length !== this.testimonials.length) {\n      this.testimonials = newTestimonials;\n      this.testimonialCount = newTestimonials.length;\n      console.log('Found testimonials:', this.testimonials.length);\n      \n      if (this.testimonials.length > 0) {\n        this.currentIndex = 0;\n        this.updateVisibleTestimonial();\n      }\n    }\n  }\n\n  private updateVisibleTestimonial() {\n    this.testimonials.forEach((testimonial, index) => {\n      const offset = (index - this.currentIndex) * 100;\n      testimonial.style.transform = `translateX(${offset}%)`;\n      testimonial.style.opacity = index === this.currentIndex ? '1' : '0';\n      testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';\n    });\n  }\n\n  private goToPrevious = () => {\n    if (this.isAnimating || this.currentIndex === 0) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex - 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  private goToNext = () => {\n    if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex + 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  render() {\n    const hasPrev = this.currentIndex > 0;\n    const hasNext = this.currentIndex < this.testimonialCount - 1;\n\n    return (\n      <Host>\n        <div class=\"testimonial-carousel\">\n          <div class=\"testimonial-slides\">\n            <slot></slot>\n          </div>\n          \n          {/* Progress indicator */}\n          {this.testimonialCount > 1 && (\n            <div class=\"testimonial-progress\">\n              {Array.from({ length: this.testimonialCount }).map((_, index) => (\n                <div \n                  class={`progress-dot ${index === this.currentIndex ? 'active' : ''}`}\n                  onClick={() => {\n                    if (!this.isAnimating && index !== this.currentIndex) {\n                      this.isAnimating = true;\n                      this.currentIndex = index;\n                      this.updateVisibleTestimonial();\n                      setTimeout(() => {\n                        this.isAnimating = false;\n                      }, 500);\n                    }\n                  }}\n                />\n              ))}\n            </div>\n          )}\n\n          {/* Navigation buttons */}\n          {this.testimonialCount > 1 && (\n            <div class=\"carousel-navigation\">\n              <button \n                class=\"nav-button prev\" \n                disabled={!hasPrev}\n                onClick={this.goToPrevious}\n                aria-label=\"Previous testimonial\"\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M19 12H5M5 12L12 19M5 12L12 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n              <button \n                class=\"nav-button next\" \n                disabled={!hasNext}\n                onClick={this.goToNext}\n                aria-label=\"Next testimonial\"\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"af-testimonial-carousel.entry.esm.js","sources":["src/components/af-testimonial-carousel/af-testimonial-carousel.css?tag=af-testimonial-carousel&encapsulation=scoped","src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.testimonial-carousel {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n.testimonial-slides {\n  position: relative;\n  width: 100%;\n  min-height: 544px;\n  overflow: hidden;\n}\n\n.testimonial-slides ::slotted(af-testimonial) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;\n}\n\n/* Progress indicator - wraps af-progress-line atom */\n/* Per Figma: centered below the card with horizontal padding */\n.testimonial-progress {\n  margin-top: 32px;\n  max-width: 840px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Navigation is now rendered inside each testimonial's footer via props */\n\n","import { Component, State, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * TestimonialCarousel - Carousel for displaying multiple customer testimonials.\n * \n * Handles navigation between testimonials with progress indicator.\n * Wrap in Section/Container for proper page layout and theming.\n * \n * @slot - Testimonial components to display in the carousel\n */\n@Component({\n  tag: 'af-testimonial-carousel',\n  styleUrl: 'af-testimonial-carousel.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialCarousel {\n  @Element() host!: HTMLElement;\n  @State() currentIndex: number = 0;\n  @State() isAnimating: boolean = false;\n  @State() testimonialCount: number = 0;\n\n  private testimonials: HTMLElement[] = [];\n  private observer: MutationObserver | undefined;\n\n  componentDidLoad() {\n    this.detectTestimonials();\n    \n    // Watch for testimonials being added (for React async rendering)\n    this.observer = new MutationObserver(() => {\n      this.detectTestimonials();\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  }\n\n  /**\n   * Listen for navigation events from testimonials\n   */\n  @Listen('navPrev')\n  handleNavPrev() {\n    this.goToPrevious();\n  }\n\n  @Listen('navNext')\n  handleNavNext() {\n    this.goToNext();\n  }\n\n  private detectTestimonials() {\n    const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial')) as HTMLElement[];\n    \n    if (newTestimonials.length !== this.testimonials.length) {\n      this.testimonials = newTestimonials;\n      this.testimonialCount = newTestimonials.length;\n      \n      if (this.testimonials.length > 0) {\n        this.currentIndex = 0;\n        this.updateVisibleTestimonial();\n      }\n    }\n  }\n\n  private updateVisibleTestimonial() {\n    const hasPrev = this.currentIndex > 0;\n    const hasNext = this.currentIndex < this.testimonialCount - 1;\n    const showNav = this.testimonialCount > 1;\n\n    this.testimonials.forEach((testimonial, index) => {\n      const offset = (index - this.currentIndex) * 100;\n      testimonial.style.transform = `translateX(${offset}%)`;\n      testimonial.style.opacity = index === this.currentIndex ? '1' : '0';\n      testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';\n      \n      // Set navigation props on testimonials (directly on the element for Stencil)\n      (testimonial as any).showNavigation = showNav;\n      (testimonial as any).hasPrev = hasPrev;\n      (testimonial as any).hasNext = hasNext;\n    });\n  }\n\n  private goToPrevious = () => {\n    if (this.isAnimating || this.currentIndex === 0) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex - 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  private goToNext = () => {\n    if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex + 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  /**\n   * Calculate progress value (0 to 1) based on current position\n   */\n  private getProgress(): number {\n    if (this.testimonialCount <= 1) return 0;\n    return (this.currentIndex + 1) / this.testimonialCount;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-carousel\">\n          <div class=\"testimonial-slides\">\n            <slot></slot>\n          </div>\n          \n          {/* Progress indicator using af-progress-line atom */}\n          {this.testimonialCount > 1 && (\n            <div class=\"testimonial-progress\">\n              <af-progress-line progress={this.getProgress()} />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/affinda/af-testimonial-stat.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-testimonial-stat.entry.esm.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.stat--accent {\n  border-left: 2px solid var(--colour-background-border-active, #8a7049);\n  padding-left: 16px;\n  min-height: 76px;\n  justify-content: center;\n}\n\n.stat-value {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 44px;\n  font-weight: 400;\n  line-height: 1;\n  letter-spacing: -0.88px;\n  color: var(--colour-typography-heading-secondary, #8a7049);\n  margin: 0;\n}\n\n.stat-description {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 24px;\n  color: var(--colour-typography-body-dark, #14343b);\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-stat',\n  styleUrl: 'af-testimonial-stat.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialStat {\n  /**\n   * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n   */\n  @Prop() value!: string;\n\n  /**\n   * Description text for the statistic\n   */\n  @Prop() description!: string;\n\n  /**\n   * Whether to show left accent border\n   */\n  @Prop() accentBorder: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n          <p class=\"stat-value\">{this.value}</p>\n          <p class=\"stat-description\">{this.description}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,kxBAAkxB;;MCQlyB,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAYtC;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAA,CAAE,EAAA,EAC3D,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAK,EACtC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CAC9C,CACD;;;;;;;"}
+{"version":3,"file":"af-testimonial-stat.entry.esm.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.stat--accent {\n  /* Themed active/accent border color */\n  border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n  padding-left: 16px;\n  min-height: 76px;\n  justify-content: center;\n}\n\n/* Stat value - override af-heading to use secondary color */\n.stat-value {\n  /* Override the heading color to use secondary (gold/ochre) instead of primary */\n  --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n  letter-spacing: -0.88px;\n  white-space: nowrap;\n}\n\n/* Description - override af-text to use body-dark for emphasis */\n.stat-description {\n  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n  overflow: hidden;\n  text-overflow: ellipsis;\n}","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-stat',\n  styleUrl: 'af-testimonial-stat.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialStat {\n  /**\n   * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n   */\n  @Prop() value!: string;\n\n  /**\n   * Description text for the statistic\n   */\n  @Prop() description!: string;\n\n  /**\n   * Whether to show left accent border\n   */\n  @Prop() accentBorder: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n          {/* Stat value uses secondary heading color via CSS override */}\n          <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n          {/* Description uses af-text for proper theming */}\n          <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,+qBAA+qB;;MCQ/rB,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AActC;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA,EAE3D,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EAElE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAW,CAC3E,CACD;;;;;;;"}

package/dist/affinda/af-testimonial.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-testimonial.entry.esm.js","sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.testimonial-card {\n  background: var(--colour-background-level-1, #e8eeed);\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  display: flex;\n  height: 544px;\n  box-sizing: border-box;\n}\n\n/* Image side - 519px wide */\n.testimonial-image {\n  position: relative;\n  width: 519px;\n  height: 100%;\n  background: #000000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.testimonial-bg-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  opacity: 0.7;\n}\n\n.testimonial-logo {\n  position: relative;\n  z-index: 1;\n  padding: 0 108px;\n  max-width: 100%;\n}\n\n.testimonial-logo img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n/* Content side */\n.testimonial-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n  padding: 48px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-left: 1px solid rgba(255, 255, 255, 0.08);\n  box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.testimonial-quote-icon {\n  width: 48px;\n  height: 48px;\n  color: var(--colour-brand-inkwell, #14343b);\n  flex-shrink: 0;\n}\n\n.testimonial-text {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 22px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--colour-typography-body-default, #2b484f);\n  margin: 0;\n  max-height: 155px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.testimonial-attribution {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 22px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--colour-typography-body-dark, #14343b);\n  margin: 0;\n}\n\n.testimonial-stats {\n  display: flex;\n  gap: 32px;\n  width: 100%;\n}\n\n.testimonial-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid var(--colour-background-border-default, #d1ddda);\n  padding-top: 32px;\n}\n\n.testimonial-nav {\n  display: flex;\n  gap: 12px;\n}\n\n.testimonial-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n  border-radius: 9999px;\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 17px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--colour-brand-inkwell, #14343b);\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.testimonial-cta:hover {\n  background: var(--colour-background-level-1, #e8eeed);\n  transform: translateY(-1px);\n}\n\n.testimonial-cta svg {\n  width: 24px;\n  height: 24px;\n}\n\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial',\n  styleUrl: 'af-testimonial.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonial {\n  /**\n   * Background image URL for the testimonial card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Company logo URL\n   */\n  @Prop() logoImage?: string;\n\n  /**\n   * Testimonial quote text\n   */\n  @Prop() quote!: string;\n\n  /**\n   * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n   */\n  @Prop() attribution!: string;\n\n  /**\n   * Link to full case study\n   */\n  @Prop() readMoreLink?: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-card\">\n          {/* Image side */}\n          <div class=\"testimonial-image\">\n            {this.backgroundImage && (\n              <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n            )}\n            {this.logoImage && (\n              <div class=\"testimonial-logo\">\n                <img src={this.logoImage} alt=\"Company logo\" />\n              </div>\n            )}\n          </div>\n\n          {/* Content side */}\n          <div class=\"testimonial-content\">\n            <div class=\"testimonial-quote-section\">\n              {/* Quote icon - using slot for flexibility */}\n              <div class=\"testimonial-quote-icon\">\n                <slot name=\"quote-icon\">\n                  <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z\" fill=\"currentColor\"/>\n                  </svg>\n                </slot>\n              </div>\n\n              <p class=\"testimonial-text\">{this.quote}</p>\n              <p class=\"testimonial-attribution\">{this.attribution}</p>\n            </div>\n\n            {/* Statistics slot */}\n            <div class=\"testimonial-stats\">\n              <slot name=\"stats\"></slot>\n            </div>\n\n            {/* Footer with navigation and CTA */}\n            <div class=\"testimonial-footer\">\n              <div class=\"testimonial-nav\">\n                <slot name=\"navigation\"></slot>\n              </div>\n              {this.readMoreLink && (\n                <a href={this.readMoreLink} class=\"testimonial-cta\">\n                  <span>Read full story</span>\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                    <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"af-testimonial.entry.esm.js","sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.testimonial-card {\n  /* Uses themed level-1 background from parent Section */\n  background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  display: flex;\n  height: 544px;\n  box-sizing: border-box;\n}\n\n/* Image side - 40.5% of card width (519px of 1280px in Figma) */\n.testimonial-image {\n  position: relative;\n  width: 40.5%;\n  min-width: 300px;\n  /* Minimum for readability */\n  max-width: 519px;\n  /* Cap at Figma design width */\n  height: 100%;\n  /* Dark background for image overlay effect - always dark regardless of theme */\n  background: var(--colour-brand-inkwell, #14343b);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.testimonial-bg-image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  opacity: 0.7;\n}\n\n.testimonial-logo {\n  position: relative;\n  z-index: 1;\n  padding: 0 108px;\n  max-width: 100%;\n}\n\n.testimonial-logo img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n/* Content side */\n.testimonial-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n  padding: 48px;\n  /* Subtle border using themed border token */\n  border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n  border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n  box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  /* Allow flex item to shrink */\n  overflow: hidden;\n}\n\n.testimonial-quote-icon {\n  width: 48px;\n  height: 48px;\n  /* Quote icon uses themed secondary heading color (gold/ochre accent) */\n  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n  flex-shrink: 0;\n}\n\n/* Quote text - layout only, typography comes from af-text */\n.testimonial-text {\n  max-height: 155px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Attribution uses body-dark color for emphasis */\n.testimonial-attribution {\n  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n}\n\n.testimonial-stats {\n  display: flex;\n  gap: 32px;\n  width: 100%;\n  flex-shrink: 0;\n}\n\n.testimonial-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  /* Themed border color */\n  border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));\n  padding-top: 32px;\n  flex-shrink: 0;\n  min-height: 48px;\n}\n\n.testimonial-nav {\n  display: flex;\n  gap: 12px;\n}\n\n.testimonial-nav-buttons {\n  display: flex;\n  gap: 12px;\n}\n\n/* CTA button is now handled by af-button atom component */","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial',\n  styleUrl: 'af-testimonial.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonial {\n  /**\n   * Background image URL for the testimonial card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Company logo URL\n   */\n  @Prop() logoImage?: string;\n\n  /**\n   * Testimonial quote text\n   */\n  @Prop() quote!: string;\n\n  /**\n   * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n   */\n  @Prop() attribution!: string;\n\n  /**\n   * Link to full case study\n   */\n  @Prop() readMoreLink?: string;\n\n  /**\n   * Whether to show built-in navigation buttons (used when in a carousel)\n   */\n  @Prop({ mutable: true }) showNavigation: boolean = false;\n\n  /**\n   * Whether the previous button is enabled\n   */\n  @Prop({ mutable: true }) hasPrev: boolean = false;\n\n  /**\n   * Whether the next button is enabled\n   */\n  @Prop({ mutable: true }) hasNext: boolean = false;\n\n  /**\n   * Emitted when the previous button is clicked\n   */\n  @Event() navPrev!: EventEmitter<void>;\n\n  /**\n   * Emitted when the next button is clicked\n   */\n  @Event() navNext!: EventEmitter<void>;\n\n  private handlePrev = () => {\n    this.navPrev.emit();\n  };\n\n  private handleNext = () => {\n    this.navNext.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-card\">\n          {/* Image side */}\n          <div class=\"testimonial-image\">\n            {this.backgroundImage && (\n              <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n            )}\n            {this.logoImage && (\n              <div class=\"testimonial-logo\">\n                <img src={this.logoImage} alt=\"Company logo\" />\n              </div>\n            )}\n          </div>\n\n          {/* Content side */}\n          <div class=\"testimonial-content\">\n            <div class=\"testimonial-quote-section\">\n              {/* Quote icon - using af-icon atom with slot for flexibility */}\n              <div class=\"testimonial-quote-icon\">\n                <slot name=\"quote-icon\">\n                  <af-icon name=\"quote\" size={48} />\n                </slot>\n              </div>\n\n              {/* Quote text - using af-text atom for proper theming */}\n              <af-text variant=\"xlarge\" class=\"testimonial-text\">{this.quote}</af-text>\n              {/* Attribution - using af-text atom with dark variant styling */}\n              <af-text variant=\"xlarge\" class=\"testimonial-attribution\">{this.attribution}</af-text>\n            </div>\n\n            {/* Statistics slot */}\n            <div class=\"testimonial-stats\">\n              <slot name=\"stats\"></slot>\n            </div>\n\n            {/* Footer with navigation and CTA */}\n            <div class=\"testimonial-footer\">\n              <div class=\"testimonial-nav\">\n                {this.showNavigation ? (\n                  // Render built-in navigation buttons\n                  <div class=\"testimonial-nav-buttons\">\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasPrev}\n                      onClick={this.handlePrev}\n                      ariaLabel=\"Previous testimonial\"\n                    >\n                      <af-icon name=\"arrow-left\" size={24} />\n                    </af-icon-button>\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasNext}\n                      onClick={this.handleNext}\n                      ariaLabel=\"Next testimonial\"\n                    >\n                      <af-icon name=\"arrow-right\" size={24} />\n                    </af-icon-button>\n                  </div>\n                ) : (\n                  // Allow custom navigation via slot\n                  <slot name=\"navigation\"></slot>\n                )}\n              </div>\n              {this.readMoreLink && (\n                <af-button variant=\"secondary\" href={this.readMoreLink}>\n                  Read full story\n                  <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n                </af-button>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"names":[],"mappings":"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"}

package/dist/affinda/af-text-image-nest.entry.esm.js.map

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

package/dist/affinda/af-text-image.entry.esm.js.map

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

package/dist/affinda/af-textarea.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-textarea.entry.esm.js","sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Wrapper */\n.textarea-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sds-size-space-200, 8px);\n  width: 100%;\n}\n\n/* Label row */\n.label-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.label {\n  flex: 1;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n  cursor: default;\n}\n\n.required {\n  color: var(--forms-fields-error, #be292a);\n  margin-left: 2px;\n}\n\n/* Info icon button */\n.info-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n  flex-shrink: 0;\n}\n\n.info-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.info-icon:hover {\n  opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n  outline: 2px solid var(--buttons-secondary-stroke, #14343b);\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Description */\n.description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));\n  margin: 0;\n}\n\n/* Textarea container */\n.textarea-container {\n  display: flex;\n  background: var(--forms-fields-bg-default, #ffffff);\n  border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);\n  border-radius: var(--radii-input, 8px);\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n/* Hover state */\n.textarea-container.hovered {\n  background: var(--forms-fields-bg-hover, #f3f5f5);\n}\n\n/* Focus state */\n.textarea-container.focused {\n  background: var(--forms-fields-bg-default, #ffffff);\n  border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));\n  box-shadow: \n    0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n}\n\n/* Error state */\n.textarea-container.error {\n  border-color: var(--forms-fields-stroke-error, #be292a);\n}\n\n/* Disabled state */\n.textarea-container.disabled {\n  background: var(--forms-fields-bg-disabled, #e8ebeb);\n  border-color: var(--forms-fields-stroke-default, #d0d6d8);\n  cursor: not-allowed;\n}\n\n/* Native textarea */\n.textarea {\n  flex: 1;\n  min-width: 0;\n  min-height: 108px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));\n  outline: none;\n  resize: vertical;\n}\n\n.textarea::placeholder {\n  color: var(--forms-fields-placeholder, #60767b);\n  opacity: 1;\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  color: var(--forms-fields-placeholder, #60767b);\n  resize: none;\n}\n\n.textarea:disabled::placeholder {\n  color: var(--forms-fields-placeholder, #60767b);\n}\n\n/* Error row */\n.error-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.error-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  color: var(--forms-fields-error, #be292a);\n}\n\n.error-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.error-text {\n  flex: 1;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--forms-fields-error, #be292a);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n */\n@Component({\n  tag: 'af-textarea',\n  styleUrl: 'af-textarea.css',\n  shadow: true\n})\nexport class AfTextarea {\n  /**\n   * The label text for the textarea\n   */\n  @Prop() label?: string;\n\n  /**\n   * Description text displayed below the label\n   */\n  @Prop() description?: string;\n\n  /**\n   * Placeholder text for the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The current value of the textarea\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The name of the textarea for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the textarea is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the textarea is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the textarea is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Error message to display (also sets error state)\n   */\n  @Prop() error?: string;\n\n  /**\n   * Whether to show the info icon next to the label\n   */\n  @Prop() showInfoIcon: boolean = false;\n\n  /**\n   * Number of visible rows (height)\n   */\n  @Prop() rows: number = 4;\n\n  /**\n   * Maximum length of input value\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * Minimum length of input value\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * Whether the textarea is resizable\n   */\n  @Prop() resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  /**\n   * Emitted when the textarea value changes\n   */\n  @Event() afInput!: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the textarea loses focus\n   */\n  @Event() afBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea gains focus\n   */\n  @Event() afFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the info icon is clicked\n   */\n  @Event() afInfoClick!: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private isHovered: boolean = false;\n\n  private textareaEl?: HTMLTextAreaElement;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this.afInput.emit({ value: this.value });\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.afFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.afBlur.emit();\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleInfoClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.afInfoClick.emit();\n  };\n\n  render() {\n    const hasError = !!this.error;\n    const hasValue = !!(this.value && this.value.length > 0);\n\n    const wrapperClasses = {\n      'textarea-wrapper': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused,\n      'populated': hasValue\n    };\n\n    const textareaContainerClasses = {\n      'textarea-container': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          {/* Label */}\n          {this.label && (\n            <div class=\"label-row\">\n              <label class=\"label\" htmlFor=\"textarea\">\n                {this.label}\n                {this.required && <span class=\"required\">*</span>}\n              </label>\n              {this.showInfoIcon && (\n                <button \n                  type=\"button\" \n                  class=\"info-icon\" \n                  onClick={this.handleInfoClick}\n                  aria-label=\"More information\"\n                >\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </button>\n              )}\n              <slot name=\"label-end\"></slot>\n            </div>\n          )}\n\n          {/* Description */}\n          {this.description && (\n            <p class=\"description\">{this.description}</p>\n          )}\n\n          {/* Textarea container */}\n          <div \n            class={textareaContainerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {/* Native textarea */}\n            <textarea\n              ref={(el) => this.textareaEl = el ?? undefined}\n              id=\"textarea\"\n              class=\"textarea\"\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              readonly={this.readonly}\n              rows={this.rows}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              style={{ resize: this.resize }}\n              aria-invalid={hasError ? 'true' : undefined}\n              aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n          </div>\n\n          {/* Error message */}\n          {hasError && (\n            <div class=\"error-row\" id=\"error-message\">\n              <span class=\"error-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"error-text\">{this.error}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/affinda/af-typography-lockup.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-typography-lockup.entry.esm.js","sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.lockup {\n  display: flex;\n  flex-direction: column;\n  gap: 40px;\n}\n\n/* Text alignment */\n.text-left {\n  align-items: flex-start;\n}\n\n.text-center {\n  align-items: center;\n}\n\n.text-left .copy,\n.text-left .heading,\n.text-left .description {\n  text-align: left;\n}\n\n.text-center .copy,\n.text-center .heading,\n.text-center .description {\n  text-align: center;\n}\n\n/* Copy section */\n.copy {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Heading styles */\n.heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  color: var(--typography-heading-primary, #14343B);\n  line-height: 1;\n  white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n  font-size: 56px;\n  letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n  font-size: 44px;\n  letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n  font-size: 34px;\n  letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n  font-size: 24px;\n  letter-spacing: -0.48px;\n  line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n  font-size: 20px;\n  letter-spacing: -0.4px;\n  line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n  font-size: 38px;\n  letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n  font-size: 32px;\n  letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n  font-size: 25px;\n  letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n  font-size: 20px;\n  letter-spacing: -0.4px;\n  line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n  font-size: 18px;\n  letter-spacing: -0.36px;\n  line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n  font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 26px;\n  color: var(--typography-body-default, #2B484F);\n  white-space: pre-wrap;\n}\n\n.description:empty {\n  display: none;\n}\n\n/* Buttons section */\n.buttons {\n  display: flex;\n  gap: 12px;\n}\n\n.buttons:empty {\n  display: none;\n}\n\n/* Button alignment - horizontal */\n.button-horizontal .buttons {\n  flex-direction: row;\n  align-items: center;\n}\n\n.text-left.button-horizontal {\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n}\n\n.text-left.button-horizontal .copy {\n  flex: 1 0 0;\n  max-width: 950px;\n}\n\n.text-left.button-horizontal .buttons {\n  flex-shrink: 0;\n}\n\n/* Button alignment - vertical */\n.button-vertical .buttons {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.text-center.button-vertical .buttons {\n  align-items: center;\n}\n\n/* Max width constraints for centered layouts */\n.text-center .copy {\n  max-width: 840px;\n}\n\n/* Slot content styling */\n::slotted(*) {\n  margin: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment\n   */\n  @Prop() textAlignment: 'left' | 'center' = 'left';\n\n  /**\n   * Button alignment (horizontal or vertical stacking)\n   */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`button-${this.buttonAlignment}`]: true\n    };\n\n    const copyClasses = {\n      'copy': true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class={copyClasses} style={copyStyle}>\n            <div class=\"heading\" part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class=\"description\" part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class=\"buttons\" part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAsB,MAAM;AAEjD;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAA8B,UAAU;AAwChE;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,CAAC,UAAU,IAAI,CAAC,eAAe,CAAE,CAAA,GAAG;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;AAEzE,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}
+{"version":3,"file":"af-typography-lockup.entry.esm.js","sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.lockup {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1.lockup {\n  gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1.lockup {\n  gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2.lockup {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup {\n  gap: var(--space-2, 8px);\n}\n\n/* Text alignment */\n.text-left {\n  align-items: flex-start;\n}\n\n.text-center {\n  align-items: center;\n}\n\n.text-left .copy,\n.text-left .heading,\n.text-left .description {\n  text-align: left;\n}\n\n.text-center .copy,\n.text-center .heading,\n.text-center .description {\n  text-align: center;\n}\n\n/* Copy section - base styles */\n.copy {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 840px;\n}\n\n/* Copy gap variations based on heading size and breakpoint */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1 .copy {\n  gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1 .copy {\n  gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2 .copy {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy {\n  gap: var(--space-2, 8px);\n}\n\n/* Heading styles */\n.heading {\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n  line-height: var(--line-height-heading-tight, 1);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n  font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n  font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n.breakpoint-desktop.heading-3 .heading {\n  font-size: var(--font-size-heading-3-desktop, 34px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n  font-size: var(--font-size-heading-4-desktop, 24px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n  font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n  font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n  font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n  font-size: var(--font-size-heading-4-mobile, 20px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n  font-size: var(--font-size-heading-5-mobile, 18px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n/* Description/body text - default (body/large) */\n.description {\n  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n  font-size: var(--font-size-body-large, 18px);\n  font-weight: var(--font-weight-regular, 400);\n  line-height: var(--line-height-body-large, 26px);\n  color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n  white-space: pre-wrap;\n}\n\n/* Description text size variations - smaller for heading 3 mobile, 4, and 5 */\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description {\n  font-size: var(--font-size-body-medium, 16px);\n  line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n  display: none;\n}\n\n/* Buttons section */\n.buttons {\n  display: flex;\n  gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n  display: none;\n}\n\n/* Button alignment - horizontal (desktop only) */\n.button-horizontal .buttons {\n  flex-direction: row;\n  align-items: center;\n}\n\n.text-left.button-horizontal {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-4, 16px);\n}\n\n.text-left.button-horizontal .copy {\n  flex: 1 0 0;\n  max-width: 950px;\n}\n\n/* Heading 3, 4 horizontal: different max-width */\n.text-left.button-horizontal.heading-3 .copy,\n.text-left.button-horizontal.heading-4 .copy {\n  max-width: 840px;\n}\n\n.text-left.button-horizontal .buttons {\n  flex-shrink: 0;\n}\n\n/* Button alignment - vertical */\n.button-vertical .buttons {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.text-center.button-vertical .buttons {\n  justify-content: center;\n}\n\n/* Mobile button stacking - buttons stack vertically on mobile */\n.breakpoint-mobile .buttons {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.breakpoint-mobile.text-center .buttons {\n  align-items: center;\n}\n\n/* Max width constraints for centered layouts */\n.text-center .copy {\n  max-width: 840px;\n}\n\n/* Slot content styling */\n::slotted(*) {\n  margin: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment\n   */\n  @Prop() textAlignment: 'left' | 'center' = 'left';\n\n  /**\n   * Button alignment (horizontal or vertical stacking)\n   */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`button-${this.buttonAlignment}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const copyClasses = {\n      'copy': true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class={copyClasses} style={copyStyle}>\n            <div class=\"heading\" part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class=\"description\" part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class=\"buttons\" part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,yoIAAyoI;;MCO1pI,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAsB,MAAM;AAEjD;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAA8B,UAAU;AAwChE;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,CAAC,UAAU,IAAI,CAAC,eAAe,CAAE,CAAA,GAAG,IAAI;AACxC,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE;SACT;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;AAEzE,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}

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

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

package/dist/affinda/affinda.css

@@ -1 +1 @@
-:root{--colour-brand-mist-green:#C6D5D1;--colour-brand-inkwell:#14343B;--colour-brand-soft-clay:#B09670;--colour-brand-white:#FFFFFF;--colour-brand-ivory-paper:#FFF9E1;--colour-brand-azure:#7FE2D4;--colour-brand-ice:#A6FFF8;--colour-tints-mist-green-20:#F6FAF9;--colour-tints-mist-green-30:#F2F9F5;--colour-tints-mist-green-40:#ECF6F3;--colour-tints-mist-green-50:#E9F5FA;--colour-tints-mist-green-100:#E1EEE1;--colour-tints-mist-green-200:#D2E8E3;--colour-tints-mist-green-300:#C2E4E3;--colour-tints-mist-green-400:#B2D0D0A;--colour-tints-mist-green-500:#A1BABA;--colour-tints-mist-green-600:#92A7A7;--colour-tints-mist-green-700:#849898;--colour-tints-mist-green-800:#1B6A68;--colour-tints-inkwell-20:#F8FAFA;--colour-tints-inkwell-30:#F5F9F5;--colour-tints-inkwell-40:#EEF5F5;--colour-tints-inkwell-50:#E8E6E8;--colour-tints-inkwell-100:#D4D4D4;--colour-tints-inkwell-200:#AAB6B1;--colour-tints-inkwell-300:#7D969B;--colour-tints-inkwell-400:#4E6E5F;--colour-tints-inkwell-500:#1E4A48;--colour-tints-inkwell-600:#1A3038;--colour-tints-inkwell-700:#142736;--colour-tints-inkwell-800:#0D1A20;--colour-tints-soft-clay-20:#FBF9F5;--colour-tints-soft-clay-30:#FAF8F1;--colour-tints-soft-clay-40:#F7F5E5;--colour-tints-soft-clay-50:#F7F5E1;--colour-tints-soft-clay-100:#F2EAC2;--colour-tints-soft-clay-200:#D5C5C4;--colour-tints-soft-clay-300:#D0C0A9;--colour-tints-soft-clay-400:#CDAB8D;--colour-tints-soft-clay-500:#B59B82;--colour-tints-soft-clay-600:#A08651;--colour-tints-soft-clay-700:#8D7B5A;--colour-tints-soft-clay-800:#5A5920;--colour-tints-ice-20:#FAFFFF;--colour-tints-ice-30:#F8FFFE;--colour-tints-ice-40:#F4FFFD;--colour-tints-ice-50:#E6FFFF;--colour-tints-ice-100:#E4FFF8;--colour-tints-ice-200:#C9FFF0;--colour-tints-ice-300:#C2FFF0;--colour-tints-ice-400:#B8FFFC;--colour-tints-ice-500:#8Ce;--colour-tints-ice-600:#83BB82;--colour-tints-ice-700:#10CCC9;--colour-typography-heading-primary:#14343B;--colour-typography-heading-secondary:#B09670;--colour-typography-body-dark:#14343B;--colour-typography-body-default:#14343B;--colour-typography-body-subtle:#708380;--colour-background-mist-green:#C6D5D1;--colour-background-inkwell:#14343B;--colour-background-soft-clay:#B09670;--colour-background-white:#FFFFFF;--colour-background-ivory-paper:#FFF9E1;--colour-ui-mist-green:#C6D5D1;--colour-ui-inkwell:#14343B;--colour-ui-soft-clay:#B09670;--colour-ui-white:#FFFFFF;--colour-ui-ivory-paper:#FFF9E1;--colour-ui-azure:#7FE2D4;--colour-ui-ice:#A6FFF8;--radius-sm:6px;--radius-md:12px;--radius-pill:999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--typography-headingfont:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;--typography-bodyfont:'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;--typography-sansfont:'Inter', 'Segoe UI', system-ui, sans-serif;--font-weight-regular:400;--font-weight-book:500;--font-weight-semibold:600;--font-size-heading-1-desktop:56px;--font-size-heading-1-mobile:38px;--font-size-heading-2-desktop:44px;--font-size-heading-2-mobile:32px;--font-size-heading-3-desktop:34px;--font-size-heading-3-mobile:25px;--font-size-heading-4-desktop:24px;--font-size-heading-4-mobile:20px;--font-size-heading-5-desktop:20px;--font-size-heading-5-mobile:18px;--font-size-heading-xl-desktop:80px;--font-size-heading-xl-mobile:50px;--font-size-body-xlarge:22px;--font-size-body-large:18px;--font-size-body-medium:16px;--font-size-body-small:14px;--font-size-label-button:17px;--font-size-label-tag:14px;--line-height-heading-tight:1;--line-height-heading-normal:1.1;--line-height-heading-relaxed:1.2;--line-height-body-xlarge:28px;--line-height-body-large:26px;--line-height-body-medium:24px;--line-height-body-small:20px;--line-height-label-button:20px;--line-height-label-tag:1;--letter-spacing-heading:-0.02em;--letter-spacing-body:0;--grid-xlarge-breakpoint:1440px;--grid-xlarge-columns:12;--grid-xlarge-margin:80px;--grid-xlarge-gutter:24px;--grid-xlarge-max-width:1440px;--grid-large-breakpoint:1024px;--grid-large-columns:12;--grid-large-margin:64px;--grid-large-gutter:16px;--grid-large-max-width:1024px;--grid-medium-breakpoint:768px;--grid-medium-columns:6;--grid-medium-margin:32px;--grid-medium-gutter:16px;--grid-medium-max-width:768px;--grid-small-breakpoint:375px;--grid-small-columns:4;--grid-small-margin:20px;--grid-small-gutter:16px;--grid-small-max-width:100%;--grid-xsmall-breakpoint:320px;--grid-xsmall-columns:4;--grid-xsmall-margin:16px;--grid-xsmall-gutter:16px;--grid-xsmall-max-width:100%;--icon-size-small:16px;--icon-size-medium:24px;--icon-size-large:32px;--icon-badge-size:48px;--illustration-size:432px}
+:root{--colour-brand-mist-green:#C6D5D1;--colour-brand-inkwell:#14343B;--colour-brand-soft-clay:#B09670;--colour-brand-white:#FFFFFF;--colour-brand-ivory-paper:#FFF9E1;--colour-brand-azure:#7FE2D4;--colour-brand-ice:#A6FFF8;--colour-tints-mist-green-20:#F6FAF9;--colour-tints-mist-green-30:#F2F9F5;--colour-tints-mist-green-40:#ECF6F3;--colour-tints-mist-green-50:#E9F5FA;--colour-tints-mist-green-100:#E1EEE1;--colour-tints-mist-green-200:#D2E8E3;--colour-tints-mist-green-300:#C2E4E3;--colour-tints-mist-green-400:#B2D0D0A;--colour-tints-mist-green-500:#A1BABA;--colour-tints-mist-green-600:#92A7A7;--colour-tints-mist-green-700:#849898;--colour-tints-mist-green-800:#1B6A68;--colour-tints-inkwell-20:#F8FAFA;--colour-tints-inkwell-30:#F5F9F5;--colour-tints-inkwell-40:#EEF5F5;--colour-tints-inkwell-50:#E8E6E8;--colour-tints-inkwell-100:#D4D4D4;--colour-tints-inkwell-200:#AAB6B1;--colour-tints-inkwell-300:#7D969B;--colour-tints-inkwell-400:#4E6E5F;--colour-tints-inkwell-500:#1E4A48;--colour-tints-inkwell-600:#1A3038;--colour-tints-inkwell-700:#142736;--colour-tints-inkwell-800:#0D1A20;--colour-tints-soft-clay-20:#FBF9F5;--colour-tints-soft-clay-30:#FAF8F1;--colour-tints-soft-clay-40:#F7F5E5;--colour-tints-soft-clay-50:#F7F5E1;--colour-tints-soft-clay-100:#F2EAC2;--colour-tints-soft-clay-200:#D5C5C4;--colour-tints-soft-clay-300:#D0C0A9;--colour-tints-soft-clay-400:#CDAB8D;--colour-tints-soft-clay-500:#B59B82;--colour-tints-soft-clay-600:#A08651;--colour-tints-soft-clay-700:#8D7B5A;--colour-tints-soft-clay-800:#5A5920;--colour-tints-ice-20:#FAFFFF;--colour-tints-ice-30:#F8FFFE;--colour-tints-ice-40:#F4FFFD;--colour-tints-ice-50:#E6FFFF;--colour-tints-ice-100:#E4FFF8;--colour-tints-ice-200:#C9FFF0;--colour-tints-ice-300:#C2FFF0;--colour-tints-ice-400:#B8FFFC;--colour-tints-ice-500:#8Ce;--colour-tints-ice-600:#83BB82;--colour-tints-ice-700:#10CCC9;--colour-typography-heading-primary:#14343B;--colour-typography-heading-secondary:#B09670;--colour-typography-body-dark:#14343B;--colour-typography-body-default:#14343B;--colour-typography-body-subtle:#708380;--colour-background-mist-green:#C6D5D1;--colour-background-inkwell:#14343B;--colour-background-soft-clay:#B09670;--colour-background-white:#FFFFFF;--colour-background-ivory-paper:#FFF9E1;--colour-background-level1:#E8EEED;--colour-ui-mist-green:#C6D5D1;--colour-ui-inkwell:#14343B;--colour-ui-soft-clay:#B09670;--colour-ui-white:#FFFFFF;--colour-ui-ivory-paper:#FFF9E1;--colour-ui-azure:#7FE2D4;--colour-ui-ice:#A6FFF8;--radius-sm:6px;--radius-md:12px;--radius-pill:999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--typography-headingfont:'NeuSans', Arial, sans-serif;--typography-bodyfont:'NeuSans', Arial, sans-serif;--typography-sansfont:'NeuSans', Arial, sans-serif;--font-weight-regular:400;--font-weight-book:500;--font-weight-semibold:600;--font-size-heading-1-desktop:56px;--font-size-heading-1-mobile:38px;--font-size-heading-2-desktop:44px;--font-size-heading-2-mobile:32px;--font-size-heading-3-desktop:34px;--font-size-heading-3-mobile:25px;--font-size-heading-4-desktop:24px;--font-size-heading-4-mobile:20px;--font-size-heading-5-desktop:20px;--font-size-heading-5-mobile:18px;--font-size-heading-xl-desktop:80px;--font-size-heading-xl-mobile:50px;--font-size-body-xlarge:22px;--font-size-body-large:18px;--font-size-body-medium:16px;--font-size-body-small:14px;--font-size-label-button:17px;--font-size-label-tag:14px;--line-height-heading-tight:1;--line-height-heading-normal:1.1;--line-height-heading-relaxed:1.2;--line-height-body-xlarge:28px;--line-height-body-large:26px;--line-height-body-medium:24px;--line-height-body-small:20px;--line-height-label-button:20px;--line-height-label-tag:1;--letter-spacing-heading:-0.02em;--letter-spacing-body:0;--grid-xlarge-breakpoint:1440px;--grid-xlarge-columns:12;--grid-xlarge-margin:80px;--grid-xlarge-gutter:24px;--grid-xlarge-max-width:1440px;--grid-large-breakpoint:1024px;--grid-large-columns:12;--grid-large-margin:64px;--grid-large-gutter:16px;--grid-large-max-width:1024px;--grid-medium-breakpoint:768px;--grid-medium-columns:6;--grid-medium-margin:32px;--grid-medium-gutter:16px;--grid-medium-max-width:768px;--grid-small-breakpoint:375px;--grid-small-columns:4;--grid-small-margin:20px;--grid-small-gutter:16px;--grid-small-max-width:100%;--grid-xsmall-breakpoint:320px;--grid-xsmall-columns:4;--grid-xsmall-margin:16px;--grid-xsmall-gutter:16px;--grid-xsmall-max-width:100%;--icon-size-small:16px;--icon-size-medium:24px;--icon-size-large:32px;--icon-badge-size:48px;--illustration-size:432px}

package/dist/affinda/affinda.esm.js

@@ -1,2 +1,2 @@
-import{p as a,g as e,b as t}from"./p-DI7b0bCy.js";export{s as setNonce}from"./p-DI7b0bCy.js";var o=()=>{const e=import.meta.url;const t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return a(t)};o().then((async a=>{await e();return t([["p-83b5d5ea",[[262,"af-hero-section",{variant:[1],withDecoration:[4,"with-decoration"],minHeight:[1,"min-height"]}]]],["p-1e3d40a0",[[262,"af-section",{padding:[1],background:[1],container:[4]}]]],["p-d3b2ab0e",[[257,"af-aspect-ratio",{ratio:[1]}]]],["p-954963fa",[[257,"af-button",{variant:[1],size:[1],disabled:[4],href:[1],type:[1],darkBackground:[4,"dark-background"]}]]],["p-ec7721cc",[[257,"af-button-group",{direction:[1],gap:[1]}]]],["p-1b18ab28",[[262,"af-card",{backgroundImage:[1,"background-image"],backgroundColor:[1,"background-color"],darkOverlay:[4,"dark-overlay"]}]]],["p-e3efc291",[[257,"af-client-carousel",{showHeadline:[4,"show-headline"],headlineText:[1,"headline-text"]}]]],["p-f8ac0120",[[257,"af-color-swatch",{color:[1],name:[1],size:[1]}]]],["p-1955dbad",[[262,"af-contact-item",{label:[1],value:[1]}]]],["p-7b8c36e0",[[262,"af-cta-section",{heading:[1],description:[1],primaryButtonText:[1,"primary-button-text"],primaryButtonUrl:[1,"primary-button-url"],secondaryButtonText:[1,"secondary-button-text"],secondaryButtonUrl:[1,"secondary-button-url"],illustrationUrl:[1,"illustration-url"],showWaveDecoration:[4,"show-wave-decoration"]}]]],["p-fc2cb8d1",[[262,"af-feature-accordion",{heading:[1],items:[1],cycleInterval:[2,"cycle-interval"],autoCycle:[4,"auto-cycle"],expandedIndex:[32],timerProgress:[32]},null,{autoCycle:["handleAutoCycleChange"]}]]],["p-806d129e",[[262,"af-footer",{copyrightText:[1,"copyright-text"],statusText:[1,"status-text"],statusUrl:[1,"status-url"],systemsOperational:[4,"systems-operational"],showStatus:[4,"show-status"]}]]],["p-0eb8173d",[[262,"af-footer-column",{heading:[1]}]]],["p-fb4e3a8d",[[262,"af-footer-link",{href:[1],external:[4]}]]],["p-050f98cd",[[257,"af-icon-button",{variant:[1],size:[1],disabled:[4],href:[1],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-9071c2a7",[[257,"af-logo-well"]]],["p-bd30e86a",[[262,"af-social-link",{href:[1],label:[1],icon:[1]}]]],["p-e1198ca3",[[262,"af-testimonial",{backgroundImage:[1,"background-image"],logoImage:[1,"logo-image"],quote:[1],attribution:[1],readMoreLink:[1,"read-more-link"]}]]],["p-71e663b3",[[262,"af-testimonial-carousel",{currentIndex:[32],isAnimating:[32],testimonialCount:[32]}]]],["p-b2fb60c9",[[258,"af-testimonial-stat",{value:[1],description:[1],accentBorder:[4,"accent-border"]}]]],["p-350ac7a5",[[257,"af-typography-lockup",{headingSize:[2,"heading-size"],breakpoint:[1],textAlignment:[1,"text-alignment"],buttonAlignment:[1,"button-alignment"],maxWidth:[2,"max-width"]}]]],["p-f692a7bd",[[257,"af-navbar",{showDefaultLogo:[4,"show-default-logo"],mobileMenuOpen:[32]}],[257,"af-heading",{level:[1],align:[1],theme:[1]}],[257,"af-nav-item",{hierarchy:[1],variant:[1],href:[1],active:[4]}],[257,"af-text",{variant:[1],align:[1],as:[1],theme:[1]}],[257,"af-logo",{src:[1],alt:[1]}]]],["p-3a9646e6",[[257,"af-container",{maxWidth:[1,"max-width"]}]]]],a)}));
+import{p as e,g as a,b as t}from"./p-BmU_CFQ4.js";export{s as setNonce}from"./p-BmU_CFQ4.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await a();return t([["p-44b25840",[[262,"af-testimonial",{backgroundImage:[1,"background-image"],logoImage:[1,"logo-image"],quote:[1],attribution:[1],readMoreLink:[1,"read-more-link"],showNavigation:[1028,"show-navigation"],hasPrev:[1028,"has-prev"],hasNext:[1028,"has-next"]}]]],["p-6b2d0ff4",[[262,"af-icon-text",{icon:[1],headingSize:[2,"heading-size"],orientation:[1],iconSize:[1,"icon-size"]}]]],["p-864778d0",[[262,"af-feature-card",{theme:[1],layout:[1],cardSize:[513,"card-size"],headingSize:[2,"heading-size"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"]}]]],["p-53b5149d",[[262,"af-hero-section",{theme:[1],withDecoration:[4,"with-decoration"],minHeight:[1,"min-height"],headingSize:[2,"heading-size"],textAlignment:[1,"text-alignment"],buttonAlignment:[1,"button-alignment"],maxWidth:[2,"max-width"]}]]],["p-81571029",[[262,"af-illustrated-card",{theme:[1],breakpoint:[1],cardSize:[1,"card-size"]}]]],["p-71144002",[[258,"af-testimonial-stat",{value:[1],description:[1],accentBorder:[4,"accent-border"]}]]],["p-0cd160a4",[[262,"af-video-container",{videoThumbnailUrl:[1,"video-thumbnail-url"],videoAlt:[1,"video-alt"],videoUrl:[1,"video-url"]}]]],["p-85a78bcf",[[262,"af-feature-grid",{columns:[2],mobileLayout:[1,"mobile-layout"],scrollProgress:[32]},null,{mobileLayout:["onMobileLayoutChange"]}]]],["p-1d65fd18",[[262,"af-grid-callout",{imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],imagePosition:[1,"image-position"],columns:[2],headingSize:[2,"heading-size"]}]]],["p-10801ee1",[[262,"af-in-page-banner",{theme:[1],heading:[1],description:[1],primaryButtonText:[1,"primary-button-text"],primaryButtonUrl:[1,"primary-button-url"],secondaryButtonText:[1,"secondary-button-text"],secondaryButtonUrl:[1,"secondary-button-url"],illustrationUrl:[1,"illustration-url"],showWaveDecoration:[4,"show-wave-decoration"]}]]],["p-aaa28806",[[262,"af-section",{padding:[1],theme:[1],container:[4]}]]],["p-ce3356f1",[[262,"af-split-section",{topTheme:[1,"top-theme"],bottomTheme:[1,"bottom-theme"],padding:[1],container:[4]}]]],["p-77bf8a81",[[262,"af-testimonial-carousel",{currentIndex:[32],isAnimating:[32],testimonialCount:[32]},[[0,"navPrev","handleNavPrev"],[0,"navNext","handleNavNext"]]]]],["p-2b4dc22c",[[262,"af-text-image",{imagePosition:[1,"image-position"],imageProportion:[1,"image-proportion"],src:[1],alt:[1],showSecondLockup:[4,"show-second-lockup"]}]]],["p-72f02343",[[257,"af-button-group",{direction:[1],gap:[1]}]]],["p-be049760",[[257,"af-checkbox",{checked:[1540],indeterminate:[516],disabled:[516],name:[1],value:[1]}]]],["p-b3b0ed0c",[[257,"af-client-carousel",{theme:[1]}]]],["p-e5af21c2",[[257,"af-color-swatch",{color:[1],name:[1],size:[1]}]]],["p-53ae16fe",[[262,"af-contact-item",{label:[1],value:[1]}]]],["p-a36abb83",[[262,"af-feature-accordion",{heading:[1],items:[1],cycleInterval:[2,"cycle-interval"],autoCycle:[4,"auto-cycle"],expandedIndex:[32],timerProgress:[32]},null,{autoCycle:["handleAutoCycleChange"]}]]],["p-7f20fbe0",[[257,"af-fieldset",{legend:[1],orientation:[1],disabled:[516]}]]],["p-acbbe39a",[[262,"af-footer",{copyrightText:[1,"copyright-text"],statusText:[1,"status-text"],statusUrl:[1,"status-url"],systemsOperational:[4,"systems-operational"],showStatus:[4,"show-status"]}]]],["p-1d9e532f",[[262,"af-footer-column",{heading:[1]}]]],["p-31d4c1a4",[[262,"af-footer-link",{href:[1],external:[4]}]]],["p-c0ee2420",[[257,"af-input",{label:[1],description:[1],placeholder:[1],value:[1025],type:[1],name:[1],disabled:[516],required:[4],readonly:[4],error:[1],showInfoIcon:[4,"show-info-icon"],showSearchIcon:[4,"show-search-icon"],clearable:[4],autocomplete:[1],maxlength:[2],minlength:[2],pattern:[1],isFocused:[32],isHovered:[32]}]]],["p-425253ee",[[257,"af-logo-well"]]],["p-98901734",[[257,"af-nav-card",{heading:[1],href:[1],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],isHovered:[32]}]]],["p-ea06c83b",[[257,"af-nav-menu",{heading:[1],breakpoint:[1],showBorder:[4,"show-border"],cardStyle:[516,"card-style"]}]]],["p-57713942",[[257,"af-nav-menu-nest",{type:[1],breakpoint:[1],showSidebarBorder:[516,"show-sidebar-border"]}]]],["p-e5d9913c",[[257,"af-number-badge",{number:[2],variant:[1],size:[2]}]]],["p-9f470d8b",[[257,"af-radio",{checked:[1540],disabled:[516],name:[1],value:[1]}]]],["p-96eac3af",[[262,"af-social-link",{href:[1],label:[1],icon:[1]}]]],["p-697bf0b7",[[257,"af-switch",{active:[1540],disabled:[516],name:[1],value:[1]}]]],["p-52ab3bf0",[[257,"af-tab",{label:[1],active:[516],disabled:[516],shape:[513],displayIcon:[4,"display-icon"],displayNumber:[4,"display-number"],value:[1]}]]],["p-5bbf2c8c",[[257,"af-tab-bar",{shape:[513],breakpoint:[513]},[[0,"keydown","handleKeyDown"]]]]],["p-45e1923c",[[257,"af-tag",{size:[1],variant:[1],href:[1]}]]],["p-3d3c9f62",[[262,"af-text-image-nest",{layout:[1]}]]],["p-231ba1d0",[[257,"af-textarea",{label:[1],description:[1],placeholder:[1],value:[1025],name:[1],disabled:[516],required:[4],readonly:[4],error:[1],showInfoIcon:[4,"show-info-icon"],rows:[2],maxlength:[2],minlength:[2],resize:[1],isFocused:[32],isHovered:[32]}]]],["p-a6365e94",[[258,"af-icon-box",{icon:[1],size:[1]}]]],["p-a4e4eb4d",[[257,"af-aspect-ratio",{ratio:[1]}]]],["p-f45b0060",[[257,"af-icon-button",{variant:[513],size:[1],disabled:[4],href:[1],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-8ea22b5d",[[258,"af-image",{src:[1],alt:[1]}]]],["p-861f4f57",[[257,"af-button",{variant:[513],size:[1],disabled:[4],type:[1],href:[1],hasIconLeft:[32],hasIconRight:[32]}]]],["p-c298b370",[[262,"af-card",{theme:[1],stretch:[516]}]]],["p-c3e31251",[[258,"af-progress-line",{progress:[2],orientation:[1]}]]],["p-c11088fa",[[257,"af-container",{maxWidth:[1,"max-width"]}]]],["p-3f691578",[[257,"af-navbar",{showDefaultLogo:[4,"show-default-logo"],theme:[1],mobileMenuOpen:[32],activeDropdown:[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleKeyDown"]]],[257,"af-nav-item",{hierarchy:[1],variant:[1],breakpoint:[1],href:[1],active:[4]}],[257,"af-heading",{level:[1],align:[1]}],[257,"af-logo"],[257,"af-text",{variant:[1],align:[1],as:[1]}]]],["p-b17735c9",[[257,"af-icon",{name:[1],size:[2],label:[1]}]]],["p-df148383",[[257,"af-typography-lockup",{headingSize:[2,"heading-size"],breakpoint:[1],textAlignment:[1,"text-alignment"],buttonAlignment:[1,"button-alignment"],maxWidth:[2,"max-width"]}]]]],e)}));
 //# sourceMappingURL=affinda.esm.js.map

package/dist/affinda/index.esm.js

@@ -1,2 +1,2 @@
-export{af_heading as AfHeading,af_logo as AfLogo,af_nav_item as AfNavItem,af_navbar as AfNavbar,af_text as AfText}from"./p-f692a7bd.entry.js";export{af_color_swatch as AfColorSwatch}from"./p-f8ac0120.entry.js";export{af_container as AfContainer}from"./p-3a9646e6.entry.js";export{af_aspect_ratio as AfAspectRatio}from"./p-d3b2ab0e.entry.js";export{af_button as AfButton}from"./p-954963fa.entry.js";export{af_icon_button as AfIconButton}from"./p-050f98cd.entry.js";export{af_button_group as AfButtonGroup}from"./p-ec7721cc.entry.js";export{af_typography_lockup as AfTypographyLockup}from"./p-350ac7a5.entry.js";import"./p-DI7b0bCy.js";
+export{af_heading as AfHeading,af_logo as AfLogo,af_nav_item as AfNavItem,af_navbar as AfNavbar,af_text as AfText}from"./p-3f691578.entry.js";export{af_color_swatch as AfColorSwatch}from"./p-e5af21c2.entry.js";export{af_container as AfContainer}from"./p-c11088fa.entry.js";export{af_aspect_ratio as AfAspectRatio}from"./p-a4e4eb4d.entry.js";export{af_button as AfButton}from"./p-861f4f57.entry.js";export{af_icon_button as AfIconButton}from"./p-f45b0060.entry.js";export{af_button_group as AfButtonGroup}from"./p-72f02343.entry.js";export{af_typography_lockup as AfTypographyLockup}from"./p-df148383.entry.js";export{af_checkbox as AfCheckbox}from"./p-be049760.entry.js";export{af_radio as AfRadio}from"./p-9f470d8b.entry.js";export{af_switch as AfSwitch}from"./p-697bf0b7.entry.js";export{af_fieldset as AfFieldset}from"./p-7f20fbe0.entry.js";export{af_input as AfInput}from"./p-c0ee2420.entry.js";export{af_textarea as AfTextarea}from"./p-231ba1d0.entry.js";export{af_tag as AfTag}from"./p-45e1923c.entry.js";export{af_tab as AfTab}from"./p-52ab3bf0.entry.js";export{af_tab_bar as AfTabBar}from"./p-5bbf2c8c.entry.js";export{af_feature_card as AfFeatureCard}from"./p-864778d0.entry.js";export{af_illustrated_card as AfIllustratedCard}from"./p-81571029.entry.js";import"./p-BmU_CFQ4.js";
 //# sourceMappingURL=index.esm.js.map

package/dist/affinda/index.esm.js.map

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