@affinda/wc 0.0.21 → 0.0.22

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

@@ -1 +0,0 @@
-{"file":"af-testimonial.js","mappings":"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","names":["AfTestimonial","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.testimonial-card {\n  /* 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: 50%;\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 — 22px / 140% per Webflow reference. Accepts either the\n   `quote` prop (rendered as plain text) or the `quote-body` slot (rich). */\n.testimonial-text {\n  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n  font-size: 22px;\n  line-height: 1.4;\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n.testimonial-text ::slotted(p),\n.testimonial-text p {\n  font: inherit;\n  color: inherit;\n  margin: 0 0 12px 0;\n}\n.testimonial-text ::slotted(p:last-child),\n.testimonial-text p:last-child {\n  margin-bottom: 0;\n}\n.testimonial-text ::slotted(ul),\n.testimonial-text ul {\n  margin: 0 0 12px 0;\n  padding-left: 20px;\n}\n\n/* Attribution uses body-dark color for emphasis */\n.testimonial-attribution {\n  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n  margin-top: 12px;\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/**\n * @slot quote-body - Rich quote content (paragraphs, lists). Overrides the\n *   `quote` string prop when provided. Use for testimonials that include\n *   multiple paragraphs, bulleted points, or inline emphasis.\n * @slot quote-icon - Quote icon (defaults to af-icon name=\"quote\").\n * @slot stats - Statistic items (af-testimonial-stat components).\n * @slot navigation - Custom nav controls (when not using built-in ones).\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. Falls back to the `quote-body` slot if that\n   * slot has content.\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 — slot takes priority; falls back to prop. */}\n              <div class=\"testimonial-text\">\n                <slot name=\"quote-body\">{this.quote}</slot>\n              </div>\n              {/* Attribution */}\n              <div class=\"testimonial-attribution\">{this.attribution}</div>\n            </div>\n\n            {/* Statistics slot */}\n            <div class=\"testimonial-stats\">\n              <slot name=\"stats\"></slot>\n            </div>\n\n            {/* Footer with navigation and CTA */}\n            <div class=\"testimonial-footer\">\n              <div class=\"testimonial-nav\">\n                {this.showNavigation ? (\n                  // Render built-in navigation buttons\n                  <div class=\"testimonial-nav-buttons\">\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasPrev}\n                      onClick={this.handlePrev}\n                      ariaLabel=\"Previous testimonial\"\n                    >\n                      <af-icon name=\"arrow-left\" size={24} />\n                    </af-icon-button>\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasNext}\n                      onClick={this.handleNext}\n                      ariaLabel=\"Next testimonial\"\n                    >\n                      <af-icon name=\"arrow-right\" size={24} />\n                    </af-icon-button>\n                  </div>\n                ) : (\n                  // Allow custom navigation via slot\n                  <slot name=\"navigation\"></slot>\n                )}\n              </div>\n              {this.readMoreLink && (\n                <af-button variant=\"secondary\" href={this.readMoreLink}>\n                  Read full story\n                  <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n                </af-button>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"version":3}

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

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

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"file":"af-theme-override.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,8gfAA8gf;;MCkB5hfA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAN5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;AAW1F;IATC,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,qBAAA,EAAwB,IAAI,CAAC,KAAK,EAAE,EAAA,EAC9C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfThemeOverride","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-theme-override/af-theme-override.css?tag=af-theme-override&encapsulation=scoped","src/components/af-theme-override/af-theme-override.tsx"],"sourcesContent":["/**\n * Theme Override Component Styles\n * \n * Sets theme CSS custom properties WITHOUT applying background color.\n * This allows overriding the theme context for child components while\n * maintaining the parent's visual background.\n */\n\n:host {\n  display: contents;\n}\n\n.theme-override {\n  display: contents;\n}\n\n/* ==========================================================================\n   WHITE THEME\n   ========================================================================== */\n\n.theme-white {\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-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-mistgreen-200, #e8ebeb);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-mistgreen-500, #d0d6d8);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-mistgreen-500, #d0d6d8);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   INKWELL THEME (Dark)\n   ========================================================================== */\n\n.theme-inkwell {\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-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-stroke: var(--colour-brand-ice, #A6FFFB);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-inkwell-450, #203e45);\n  --af-input-bg-hover: var(--colour-inkwell-400, #2b484f);\n  --af-input-bg-disabled: var(--colour-inkwell-600, #102a2f);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--colour-brand-ice, #a6fffb);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* ==========================================================================\n   MIST-GREEN THEME\n   ========================================================================== */\n\n.theme-mist-green {\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-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-mistgreen-300, #dde6e3);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-mistgreen-600, #b2c0bc);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   SOFT-CLAY THEME\n   ========================================================================== */\n\n.theme-soft-clay {\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-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-softclay-300, #d0c1a8);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-softclay-700, #8d785a);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-softclay-600, #9e8765);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   WHITE-IVORY THEME\n   ========================================================================== */\n\n.theme-white-ivory {\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-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-ivory-100, #fff5e0);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-ivory-200, #ffefcc);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-ivory-400, #ffe3a3);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-ivory-300, #ffe9b8);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Theme Override utility component.\n * Wraps content and applies an explicit theme, overriding any inherited theme\n * from parent containers like AfSection or AfCard.\n * \n * Unlike AfSection, this component does NOT apply a background color - \n * it only sets the CSS custom properties that child components consume.\n * \n * @slot - Content to be themed\n */\n@Component({\n  tag: 'af-theme-override',\n  styleUrl: 'af-theme-override.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfThemeOverride {\n  /** \n   * The theme to apply to child components.\n   * Overrides any inherited theme from parent containers.\n   */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n\n  render() {\n    return (\n      <Host>\n        <div class={`theme-override theme-${this.theme}`}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

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

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

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

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

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

@@ -1 +0,0 @@
-{"file":"af-visually-hidden.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,qdAAqd;;MCcpeA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;AAGG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AASnC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,SAAS,EAAE,EAAA,EAC1C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfVisuallyHidden","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-visually-hidden/af-visually-hidden.css?tag=af-visually-hidden&encapsulation=shadow","src/components/af-visually-hidden/af-visually-hidden.tsx"],"sourcesContent":[":host {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n:host(.focusable:focus-within) {\n  position: static !important;\n  width: auto !important;\n  height: auto !important;\n  padding: inherit !important;\n  margin: inherit !important;\n  overflow: visible !important;\n  clip: auto !important;\n  white-space: normal !important;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Visually Hidden component for accessible content.\n * Hides content visually while keeping it accessible to screen readers.\n * Essential for accessibility - use for skip links, form labels, etc.\n *\n * @slot - Content to hide visually\n */\n@Component({\n  tag: 'af-visually-hidden',\n  styleUrl: 'af-visually-hidden.css',\n  shadow: true,\n})\nexport class AfVisuallyHidden {\n  /**\n   * When true, the content becomes visible when focused.\n   * Useful for skip links and other focusable elements.\n   */\n  @Prop() focusable: boolean = false;\n\n  render() {\n    return (\n      <Host class={{ 'focusable': this.focusable }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/index.js.map

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

package/dist/components/p-6uEhsUaO.js

@@ -1,44 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-CxngDK-N.js';
-
-const afColorSwatchCss = ":host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}";
-
-const AfColorSwatch = /*@__PURE__*/ proxyCustomElement(class AfColorSwatch extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Size variant */
-        this.size = 'default';
-    }
-    render() {
-        return (h("div", { key: '57a141b5af5c538c5cf842a61173dd391a91d59b', class: {
-                'swatch': true,
-                [`size-${this.size}`]: true
-            }, part: "base" }, h("div", { key: '505252d9fbfb36df24f1907cd5a30278e55bf268', class: "color-preview", part: "preview", style: { backgroundColor: this.color } }), h("div", { key: '095621914872670c129c23825aa012bbba4e33bb', class: "color-info", part: "info" }, h("div", { key: '86b6164f0aed4a938a8faa210651bbc6746dd4f2', class: "color-name", part: "name" }, this.name), h("div", { key: '1d533780d3756b119ae36a6e8fa0c2b6b3acb7b4', class: "color-value", part: "value" }, this.color))));
-    }
-    static get style() { return afColorSwatchCss; }
-}, [257, "af-color-swatch", {
-        "color": [1],
-        "name": [1],
-        "size": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-color-swatch"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-color-swatch":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfColorSwatch);
-            }
-            break;
-    } });
-}
-
-export { AfColorSwatch as A, defineCustomElement as d };
-//# sourceMappingURL=p-6uEhsUaO.js.map
-
-//# sourceMappingURL=p-6uEhsUaO.js.map

package/dist/components/p-6uEhsUaO.js.map

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

package/dist/components/p-80hb0CR2.js

@@ -1,71 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
-
-const afIconButtonCss = ":host{display:inline-block}:host([variant=\"secondary\"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant=\"primary\"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant=\"tertiary\"]){color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B))}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0}.size-large{width:72px;height:72px;padding:24px}.size-large .icon{width:24px;height:24px}.size-medium{width:48px;height:48px;padding:12px}.size-medium .icon{width:24px;height:24px}.size-small{width:36px;height:36px;padding:8px}.size-small .icon{width:20px;height:20px}.icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.icon ::slotted(*){width:100%;height:100%;color:inherit}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-tertiary{background:transparent;border-color:transparent;color:var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B))}.variant-tertiary:hover:not(.disabled){opacity:0.8}.variant-tertiary:active:not(.disabled){opacity:0.6}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.icon-button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}button.icon-button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B))}button.icon-button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}button.icon-button.variant-tertiary{background:transparent;border:1px solid transparent}";
-
-const AfIconButton = /*@__PURE__*/ proxyCustomElement(class AfIconButton extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The visual variant of the button.
-         * - `primary` - Main CTA with filled ice background
-         * - `secondary` - Supporting action with white background
-         * - `tertiary` - Minimal style with transparent background
-         */
-        this.variant = 'primary';
-        /**
-         * The size of the button
-         */
-        this.size = 'medium';
-        /**
-         * Whether the button is disabled
-         */
-        this.disabled = false;
-        /**
-         * Button type (when not using href)
-         */
-        this.type = 'button';
-    }
-    render() {
-        const classes = {
-            'icon-button': true,
-            [`variant-${this.variant}`]: true,
-            [`size-${this.size}`]: true,
-            'disabled': this.disabled
-        };
-        const content = (h("span", { class: "icon" }, h("slot", null)));
-        if (this.href && !this.disabled) {
-            return (h(Host, null, h("a", { href: this.href, class: classes, "aria-label": this.ariaLabel }, content)));
-        }
-        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes, "aria-label": this.ariaLabel }, content)));
-    }
-    static get style() { return afIconButtonCss; }
-}, [257, "af-icon-button", {
-        "variant": [513],
-        "size": [1],
-        "disabled": [4],
-        "href": [1],
-        "type": [1],
-        "ariaLabel": [1, "aria-label"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-icon-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-icon-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfIconButton);
-            }
-            break;
-    } });
-}
-
-export { AfIconButton as A, defineCustomElement as d };
-//# sourceMappingURL=p-80hb0CR2.js.map
-
-//# sourceMappingURL=p-80hb0CR2.js.map

package/dist/components/p-80hb0CR2.js.map

@@ -1 +0,0 @@
-{"file":"p-80hb0CR2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,gzFAAgzF;;MCO3zF,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAuCvD;IAhCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;QAED,MAAM,OAAO,IACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR,CACR;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC3D,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content inheritance */\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"tertiary\"]) {\n  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n.icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  padding: 0;\n}\n\n/* Size variants */\n.size-large {\n  width: 72px;\n  height: 72px;\n  padding: 24px;\n}\n\n.size-large .icon {\n  width: 24px;\n  height: 24px;\n}\n\n.size-medium {\n  width: 48px;\n  height: 48px;\n  padding: 12px;\n}\n\n.size-medium .icon {\n  width: 24px;\n  height: 24px;\n}\n\n.size-small {\n  width: 36px;\n  height: 36px;\n  padding: 8px;\n}\n\n.size-small .icon {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon slot - inherits color from parent */\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: inherit;\n}\n\n.icon ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  color: inherit;\n}\n\n/* Primary variant (ice background) */\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n/* Secondary variant (outlined) */\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* Tertiary variant (minimal, no border) */\n.variant-tertiary {\n  background: transparent;\n  border-color: transparent;\n  color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-tertiary:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* Disabled state */\n.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.icon-button {\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\nbutton.icon-button.variant-primary {\n  background: 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}\n\nbutton.icon-button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\nbutton.icon-button.variant-tertiary {\n  background: transparent;\n  border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled ice background\n   * - `secondary` - Supporting action with white background\n   * - `tertiary` - Minimal style with transparent background\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'large' | 'medium' | 'small' = 'medium';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Accessible label for screen readers\n   */\n  @Prop() ariaLabel!: string;\n\n  render() {\n    const classes = {\n      'icon-button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = (\n      <span class=\"icon\">\n        <slot></slot>\n      </span>\n    );\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BBVslKpK.js

@@ -1,59 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-CxngDK-N.js';
-
-const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));letter-spacing:var(--letter-spacing-heading, -0.02em)}.align-inherit{text-align:var(--af-text-align, left)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:var(--font-size-heading-xl-mobile, 50px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-xl{font-size:var(--font-size-heading-xl-desktop, 80px)}}.level-1{font-size:var(--font-size-heading-1-mobile, 38px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-1{font-size:var(--font-size-heading-1-desktop, 56px)}}.level-2{font-size:var(--font-size-heading-2-mobile, 32px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-2{font-size:var(--font-size-heading-2-desktop, 44px)}}.level-3{font-size:var(--font-size-heading-3-mobile, 25px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-3{font-size:var(--font-size-heading-3-desktop, 34px)}}.level-4{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-4{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}}.level-5{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-5{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}}";
-
-const AfHeading = /*@__PURE__*/ proxyCustomElement(class AfHeading extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Heading level */
-        this.level = '1';
-        /** Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) */
-        this.align = 'inherit';
-    }
-    getHeadingTag() {
-        // Map display levels to semantic HTML tags
-        const tagMap = {
-            'xl': 'h1',
-            '1': 'h1',
-            '2': 'h2',
-            '3': 'h3',
-            '4': 'h4',
-            '5': 'h5'
-        };
-        return tagMap[this.level] || 'h1';
-    }
-    render() {
-        const Tag = this.getHeadingTag();
-        return (h(Tag, { key: '554451170ad9c9cf3345d4c115cc4bd360c54651', class: {
-                'heading': true,
-                [`level-${this.level}`]: true,
-                [`align-${this.align}`]: true
-            }, part: "base" }, h("slot", { key: 'a41808f28f04efa17b49ef1a4ebfd79896ba8e98' })));
-    }
-    static get style() { return afHeadingCss; }
-}, [257, "af-heading", {
-        "level": [1],
-        "align": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-heading"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-heading":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfHeading);
-            }
-            break;
-    } });
-}
-
-export { AfHeading as A, defineCustomElement as d };
-//# sourceMappingURL=p-BBVslKpK.js.map
-
-//# sourceMappingURL=p-BBVslKpK.js.map

package/dist/components/p-BBVslKpK.js.map

@@ -1 +0,0 @@
-{"file":"p-BBVslKpK.js","mappings":";;AAAA,MAAM,YAAY,GAAG,0rDAA0rD;;MCYlsD,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAuC,GAAG;;AAG/C,QAAA,IAAK,CAAA,KAAA,GAA4C,SAAS;AA+BnE;IA7BS,aAAa,GAAA;;AAEnB,QAAA,MAAM,MAAM,GAA2B;AACrC,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE;SACN;QACD,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI;;IAGnC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS;QAEvC,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;AAC1B,aAAA,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.heading {\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n}\n\n/* Alignment - inherits from --af-text-align if set, otherwise uses explicit align prop */\n.align-inherit {\n  text-align: var(--af-text-align, left);\n}\n\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Heading XL */\n.level-xl {\n  font-size: var(--font-size-heading-xl-mobile, 50px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-xl {\n    font-size: var(--font-size-heading-xl-desktop, 80px);\n  }\n}\n\n/* Heading 1 */\n.level-1 {\n  font-size: var(--font-size-heading-1-mobile, 38px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-1 {\n    font-size: var(--font-size-heading-1-desktop, 56px);\n  }\n}\n\n/* Heading 2 */\n.level-2 {\n  font-size: var(--font-size-heading-2-mobile, 32px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-2 {\n    font-size: var(--font-size-heading-2-desktop, 44px);\n  }\n}\n\n/* Heading 3 */\n.level-3 {\n  font-size: var(--font-size-heading-3-mobile, 25px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-3 {\n    font-size: var(--font-size-heading-3-desktop, 34px);\n  }\n}\n\n/* Heading 4 */\n.level-4 {\n  font-size: var(--font-size-heading-4-mobile, 20px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-4 {\n    font-size: var(--font-size-heading-4-desktop, 24px);\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n\n/* Heading 5 */\n.level-5 {\n  font-size: var(--font-size-heading-5-mobile, 18px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-5 {\n    font-size: var(--font-size-heading-5-desktop, 20px);\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) */\n  @Prop() align: 'inherit' | 'left' | 'center' | 'right' = 'inherit';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BHKA-yEm.js

@@ -1,102 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-CxngDK-N.js';
-
-const afAspectRatioCss = ":host{display:block;width:100%}.aspect-ratio-container{width:100%;position:relative;overflow:hidden}.aspect-ratio-container ::slotted(*){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}";
-
-const AfAspectRatio = /*@__PURE__*/ proxyCustomElement(class AfAspectRatio extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The aspect ratio to maintain. Can be:
-         * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.
-         * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.
-         *
-         * @example
-         * <af-aspect-ratio ratio="16:9">Content</af-aspect-ratio>
-         * <af-aspect-ratio ratio="1.618 / 1">Content</af-aspect-ratio>
-         */
-        this.ratio = '1:1';
-    }
-    getRatioValue() {
-        // Map common ratio shortcuts to actual CSS aspect-ratio values
-        const ratioMap = {
-            // Common ratios
-            '1:1': '1 / 1',
-            '1:2': '1 / 2',
-            '2:1': '2 / 1',
-            '2:3': '2 / 3',
-            '3:1': '3 / 1',
-            '3:2': '3 / 2',
-            '3:4': '3 / 4',
-            '4:1': '4 / 1',
-            '4:3': '4 / 3',
-            '4:5': '4 / 5',
-            '5:2': '5 / 2',
-            '5:4': '5 / 4',
-            '8:3': '8 / 3',
-            '8:5': '8 / 5',
-            // Screen ratios
-            '9:8': '9 / 8',
-            '9:16': '9 / 16',
-            '9:21': '9 / 21',
-            '10:16': '10 / 16',
-            '14:3': '14 / 3',
-            '16:5': '16 / 5',
-            '16:9': '16 / 9',
-            '16:10': '16 / 10',
-            '21:9': '21 / 9',
-            '32:9': '32 / 9',
-            // Golden ratio variants
-            'golden-portrait': '1 / 1.618',
-            'golden-landscape': '1.618 / 1',
-            'golden-portrait-half': '1 / 0.809',
-            'golden-landscape-half': '0.809 / 1',
-            // Paper sizes - A4
-            'a4-portrait': '1 / 1.414',
-            'a4-landscape': '1.414 / 1',
-            'a4-portrait-half': '1 / 0.707',
-            'a4-landscape-half': '0.707 / 1',
-            // Paper sizes - Letter
-            'letter-portrait': '1 / 1.294',
-            'letter-landscape': '1.294 / 1',
-            'letter-portrait-half': '1 / 0.647',
-            'letter-landscape-half': '0.647 / 1',
-            // Special
-            '6:7': '6 / 7'
-        };
-        // If it's a predefined ratio, return the mapped value
-        if (ratioMap[this.ratio]) {
-            return ratioMap[this.ratio];
-        }
-        // Otherwise, assume it's a custom ratio already in the correct format
-        return this.ratio;
-    }
-    render() {
-        const ratioValue = this.getRatioValue();
-        return (h("div", { key: '02bfa5463911ecd25903521e90a0570bb3bca0ad', class: "aspect-ratio-container", style: { aspectRatio: ratioValue } }, h("slot", { key: '9575c859052e8f1b1b362d9395fdfdf43d46b0b4' })));
-    }
-    static get style() { return afAspectRatioCss; }
-}, [257, "af-aspect-ratio", {
-        "ratio": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-aspect-ratio"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-aspect-ratio":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfAspectRatio);
-            }
-            break;
-    } });
-}
-
-export { AfAspectRatio as A, defineCustomElement as d };
-//# sourceMappingURL=p-BHKA-yEm.js.map
-
-//# sourceMappingURL=p-BHKA-yEm.js.map

package/dist/components/p-BHKA-yEm.js.map

@@ -1 +0,0 @@
-{"file":"p-BHKA-yEm.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6MAA6M;;MCWzN,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,KAAK;AAuE9B;IArES,aAAa,GAAA;;AAEnB,QAAA,MAAM,QAAQ,GAA8B;;AAE1C,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;;AAEd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;;AAEhB,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,sBAAsB,EAAE,WAAW;AACnC,YAAA,uBAAuB,EAAE,WAAW;;AAEpC,YAAA,aAAa,EAAE,WAAW;AAC1B,YAAA,cAAc,EAAE,WAAW;AAC3B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,mBAAmB,EAAE,WAAW;;AAEhC,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,sBAAsB,EAAE,WAAW;AACnC,YAAA,uBAAuB,EAAE,WAAW;;AAEpC,YAAA,KAAK,EAAE;SACR;;AAGD,QAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;;;QAI7B,OAAO,IAAI,CAAC,KAAK;;IAGnB,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EAAA,EAElC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-aspect-ratio/af-aspect-ratio.css?tag=af-aspect-ratio&encapsulation=shadow","src/components/af-aspect-ratio/af-aspect-ratio.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.aspect-ratio-container {\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Ensure slotted content fills the container */\n.aspect-ratio-container ::slotted(*) {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A container component that maintains a fixed aspect ratio for its content.\n * Useful for images, videos, or any content that needs to maintain specific proportions.\n */\n@Component({\n  tag: 'af-aspect-ratio',\n  styleUrl: 'af-aspect-ratio.css',\n  shadow: true\n})\nexport class AfAspectRatio {\n  /**\n   * The aspect ratio to maintain. Can be:\n   * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.\n   * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.\n   *\n   * @example\n   * <af-aspect-ratio ratio=\"16:9\">Content</af-aspect-ratio>\n   * <af-aspect-ratio ratio=\"1.618 / 1\">Content</af-aspect-ratio>\n   */\n  @Prop() ratio: string = '1:1';\n\n  private getRatioValue(): string {\n    // Map common ratio shortcuts to actual CSS aspect-ratio values\n    const ratioMap: { [key: string]: string } = {\n      // Common ratios\n      '1:1': '1 / 1',\n      '1:2': '1 / 2',\n      '2:1': '2 / 1',\n      '2:3': '2 / 3',\n      '3:1': '3 / 1',\n      '3:2': '3 / 2',\n      '3:4': '3 / 4',\n      '4:1': '4 / 1',\n      '4:3': '4 / 3',\n      '4:5': '4 / 5',\n      '5:2': '5 / 2',\n      '5:4': '5 / 4',\n      '8:3': '8 / 3',\n      '8:5': '8 / 5',\n      // Screen ratios\n      '9:8': '9 / 8',\n      '9:16': '9 / 16',\n      '9:21': '9 / 21',\n      '10:16': '10 / 16',\n      '14:3': '14 / 3',\n      '16:5': '16 / 5',\n      '16:9': '16 / 9',\n      '16:10': '16 / 10',\n      '21:9': '21 / 9',\n      '32:9': '32 / 9',\n      // Golden ratio variants\n      'golden-portrait': '1 / 1.618',\n      'golden-landscape': '1.618 / 1',\n      'golden-portrait-half': '1 / 0.809',\n      'golden-landscape-half': '0.809 / 1',\n      // Paper sizes - A4\n      'a4-portrait': '1 / 1.414',\n      'a4-landscape': '1.414 / 1',\n      'a4-portrait-half': '1 / 0.707',\n      'a4-landscape-half': '0.707 / 1',\n      // Paper sizes - Letter\n      'letter-portrait': '1 / 1.294',\n      'letter-landscape': '1.294 / 1',\n      'letter-portrait-half': '1 / 0.647',\n      'letter-landscape-half': '0.647 / 1',\n      // Special\n      '6:7': '6 / 7'\n    };\n\n    // If it's a predefined ratio, return the mapped value\n    if (ratioMap[this.ratio]) {\n      return ratioMap[this.ratio];\n    }\n\n    // Otherwise, assume it's a custom ratio already in the correct format\n    return this.ratio;\n  }\n\n  render() {\n    const ratioValue = this.getRatioValue();\n\n    return (\n      <div\n        class=\"aspect-ratio-container\"\n        style={{ aspectRatio: ratioValue }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}