@affinda/wc 0.0.15 → 0.0.16

package/dist/cjs/af-typography-lockup.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-typography-lockup.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}
+{"version":3,"file":"af-typography-lockup.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}

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

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-ybEiHT0b.js');
+
+const afVideoContainerCss = ".sc-af-video-container-h{display:block;width:100%}.video-container.sc-af-video-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:var(--space-10, 40px)}.video-container__top.sc-af-video-container,.video-container__bottom.sc-af-video-container{width:100%;display:flex;flex-direction:column;align-items:center}.video-container__top.sc-af-video-container:empty,.video-container__bottom.sc-af-video-container:empty{display:none}.video-container__video.sc-af-video-container{width:100%;max-width:1024px}.video-container__thumbnail-wrapper.sc-af-video-container{position:absolute;inset:0;border-radius:var(--radii-video-crop, 16px);overflow:hidden;background-color:var(--colour-inkwell-400, #2b484f)}.video-container__thumbnail.sc-af-video-container{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}.video-container__play-button.sc-af-video-container{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;padding:24px;border-radius:var(--radii-button, 9999px);background-color:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));cursor:pointer;transition:background-color 0.2s ease;color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b))}.video-container__play-button.sc-af-video-container:hover{background-color:var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2))}.video-container__play-button.sc-af-video-container:focus-visible{outline:2px solid var(--colour-brand-ice, #a6fffb);outline-offset:2px}@media (max-width: 768px){.video-container.sc-af-video-container{gap:var(--space-8, 32px)}.video-container__play-button.sc-af-video-container{padding:12px}}";
+
+const AfVideoContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.playClick = index.createEvent(this, "playClick");
+        /** Video thumbnail image URL */
+        this.videoThumbnailUrl = '';
+        /** Video alt text for accessibility */
+        this.videoAlt = 'Video thumbnail';
+        /** Optional video URL for play button link */
+        this.videoUrl = '';
+        /**
+         * Handles play button click - emits event and optionally opens URL
+         */
+        this.handlePlayClick = () => {
+            const event = this.playClick.emit({ videoUrl: this.videoUrl });
+            // Only open URL if event wasn't prevented and URL exists
+            if (!event.defaultPrevented && this.videoUrl) {
+                window.open(this.videoUrl, '_blank');
+            }
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b31355a1ccf3cc4f9655f9c78d16f70fb104a671' }, index.h("div", { key: 'ebd03ff2668174d400d3d09488030d38d1a25fe8', class: "video-container" }, index.h("div", { key: 'af32cf3f6fec012e95d35d4224daebdfd64917b5', class: "video-container__top" }, index.h("slot", { key: '0258f4b6a027b09ecefd4ff6c7f2a62db6075847', name: "top" })), index.h("div", { key: 'fb74dae0250cfdf22b8c5503cd993ac67894276e', class: "video-container__video" }, index.h("af-aspect-ratio", { key: '88445a4ae1125882d3dc8fffc83fb1f880857fae', ratio: "16:9" }, index.h("div", { key: 'd87f8d15036026b04330e23395f95ad8363d72a3', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (index.h("img", { key: 'e1327574236c73cc6c5b5a7a820c3905d2307047', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), index.h("button", { key: 'c278f6944c5d69fec242a8291655985a20a7896f', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, index.h("af-icon", { key: 'df9ca50c0938d8539c7a79fb6f5bceb6326ed96c', name: "play", size: 24 }))))), index.h("div", { key: '3e2ba7be65431315fd3996fdadfbc45acb1be76b', class: "video-container__bottom" }, index.h("slot", { key: '10d64457339942b3bde412a740a66bf9665e8033', name: "bottom" })))));
+    }
+};
+AfVideoContainer.style = afVideoContainerCss;
+
+exports.af_video_container = AfVideoContainer;
+//# sourceMappingURL=af-video-container.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-video-container.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAE1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAQ,CACpB,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjCA,OAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAC3BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC5C,IAAI,CAAC,iBAAiB,KACrBA,OAAA,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,EAEDA,OAAA,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,EAEbA,OAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAY,CAAA,CAClC,CACL,CACU,CACd,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;"}

package/dist/cjs/affinda.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DfEVhbS6.js');
+var index = require('./index-ybEiHT0b.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["af-hero-section.cjs",[[262,"af-hero-section",{"variant":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"background":[1],"container":[4]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"darkBackground":[4,"dark-background"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-client-carousel.cjs",[[257,"af-client-carousel",{"showHeadline":[4,"show-headline"],"headlineText":[1,"headline-text"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item.cjs",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-cta-section.cjs",[[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"]}]]],["af-feature-accordion.cjs",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-footer.cjs",[[262,"af-footer",{"copyrightText":[1,"copyright-text"],"statusText":[1,"status-text"],"statusUrl":[1,"status-url"],"systemsOperational":[4,"systems-operational"],"showStatus":[4,"show-status"]}]]],["af-footer-column.cjs",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link.cjs",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-social-link.cjs",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-heading_5.cjs",[[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]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
+  return index.bootstrapLazy([["af-testimonial.cjs",[[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"]}]]],["af-icon-text.cjs",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-feature-card.cjs",[[262,"af-feature-card",{"theme":[1],"layout":[1],"cardSize":[513,"card-size"],"headingSize":[2,"heading-size"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"]}]]],["af-hero-section.cjs",[[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"]}]]],["af-illustrated-card.cjs",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container.cjs",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid.cjs",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout.cjs",[[262,"af-grid-callout",{"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePosition":[1,"image-position"],"columns":[2],"headingSize":[2,"heading-size"]}]]],["af-in-page-banner.cjs",[[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"]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"theme":[1],"container":[4]}]]],["af-split-section.cjs",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"navPrev","handleNavPrev"],[0,"navNext","handleNavNext"]]]]],["af-text-image.cjs",[[262,"af-text-image",{"imagePosition":[1,"image-position"],"imageProportion":[1,"image-proportion"],"src":[1],"alt":[1],"showSecondLockup":[4,"show-second-lockup"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-checkbox.cjs",[[257,"af-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[1],"value":[1]}]]],["af-client-carousel.cjs",[[257,"af-client-carousel",{"theme":[1]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item.cjs",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-feature-accordion.cjs",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-fieldset.cjs",[[257,"af-fieldset",{"legend":[1],"orientation":[1],"disabled":[516]}]]],["af-footer.cjs",[[262,"af-footer",{"copyrightText":[1,"copyright-text"],"statusText":[1,"status-text"],"statusUrl":[1,"status-url"],"systemsOperational":[4,"systems-operational"],"showStatus":[4,"show-status"]}]]],["af-footer-column.cjs",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link.cjs",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-input.cjs",[[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]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-nav-card.cjs",[[257,"af-nav-card",{"heading":[1],"href":[1],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"isHovered":[32]}]]],["af-nav-menu.cjs",[[257,"af-nav-menu",{"heading":[1],"breakpoint":[1],"showBorder":[4,"show-border"],"cardStyle":[516,"card-style"]}]]],["af-nav-menu-nest.cjs",[[257,"af-nav-menu-nest",{"type":[1],"breakpoint":[1],"showSidebarBorder":[516,"show-sidebar-border"]}]]],["af-number-badge.cjs",[[257,"af-number-badge",{"number":[2],"variant":[1],"size":[2]}]]],["af-radio.cjs",[[257,"af-radio",{"checked":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-social-link.cjs",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-switch.cjs",[[257,"af-switch",{"active":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-tab.cjs",[[257,"af-tab",{"label":[1],"active":[516],"disabled":[516],"shape":[513],"displayIcon":[4,"display-icon"],"displayNumber":[4,"display-number"],"value":[1]}]]],["af-tab-bar.cjs",[[257,"af-tab-bar",{"shape":[513],"breakpoint":[513]},[[0,"keydown","handleKeyDown"]]]]],["af-tag.cjs",[[257,"af-tag",{"size":[1],"variant":[1],"href":[1]}]]],["af-text-image-nest.cjs",[[262,"af-text-image-nest",{"layout":[1]}]]],["af-textarea.cjs",[[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]}]]],["af-icon-box.cjs",[[258,"af-icon-box",{"icon":[1],"size":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[513],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-image.cjs",[[258,"af-image",{"src":[1],"alt":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[513],"size":[1],"disabled":[4],"type":[1],"href":[1],"hasIconLeft":[32],"hasIconRight":[32]}]]],["af-card.cjs",[[262,"af-card",{"theme":[1],"stretch":[516]}]]],["af-progress-line.cjs",[[258,"af-progress-line",{"progress":[2],"orientation":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-heading_5.cjs",[[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]}]]],["af-icon.cjs",[[257,"af-icon",{"name":[1],"size":[2],"label":[1]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-DfEVhbS6.js → index-ybEiHT0b.js}

@@ -4,7 +4,7 @@ const NAMESPACE = 'affinda';
 const BUILD = /* affinda */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = ":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}";
+const globalStyles = ":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}";
 
 /*
  Stencil Client Platform v4.38.2 | MIT Licensed | https://stenciljs.com
@@ -90,6 +90,7 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 var styles = /* @__PURE__ */ new Map();
 var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
 var win = typeof window !== "undefined" ? window : {};
 var plt = {
   $flags$: 0,
@@ -100,6 +101,23 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
+var supportsListenerOptions = /* @__PURE__ */ (() => {
+  var _a;
+  let supportsListenerOptions2 = false;
+  try {
+    (_a = win.document) == null ? void 0 : _a.addEventListener(
+      "e",
+      null,
+      Object.defineProperty({}, "passive", {
+        get() {
+          supportsListenerOptions2 = true;
+        }
+      })
+    );
+  } catch (e) {
+  }
+  return supportsListenerOptions2;
+})();
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
   try {
@@ -603,6 +621,21 @@ var getElement = (ref) => {
   var _a;
   return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
 };
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -643,7 +676,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -682,15 +719,26 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       } catch (e) {
       }
     }
+    let xlink = false;
+    {
+      if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
+        memberName = ln;
+        xlink = true;
+      }
+    }
     if (newValue == null || newValue === false) {
       if (newValue !== false || elm.getAttribute(memberName) === "") {
-        {
+        if (xlink) {
+          elm.removeAttributeNS(XLINK_NS, memberName);
+        } else {
           elm.removeAttribute(memberName);
         }
       }
     } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
       newValue = newValue === true ? "" : newValue;
-      {
+      if (xlink) {
+        elm.setAttributeNS(XLINK_NS, memberName, newValue);
+      } else {
         elm.setAttribute(memberName, newValue);
       }
     }
@@ -882,6 +930,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         {
           checkSlotFallbackVisibility = true;
@@ -1092,6 +1141,12 @@ var markSlotContentForRelocation = (elm) => {
     }
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   if (typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
     addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
@@ -1129,6 +1184,14 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const isHostElement = isHost(renderFnResults);
   const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      {
+        rootVnode.$attrs$[attribute] = hostElm[propName];
+      }
+    });
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1260,6 +1323,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   let maybePromise;
   if (isInitialLoad) {
     {
+      {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
       if (hostRef.$fetchedCbList$.length) {
         hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
@@ -1563,8 +1633,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1689,6 +1763,7 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -1716,6 +1791,12 @@ var disconnectInstance = (instance, elm) => {
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    {
+      if (hostRef == null ? void 0 : hostRef.$rmListeners$) {
+        hostRef.$rmListeners$.map((rmListener) => rmListener());
+        hostRef.$rmListeners$ = void 0;
+      }
+    }
     if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$, elm);
     } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -1765,6 +1846,12 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$listeners$ = compactMeta[3];
+      }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
       {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
         cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
@@ -1799,6 +1886,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -1868,18 +1956,54 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   }
   endBootstrap();
 };
+var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+  if (listeners && win.document) {
+    listeners.map(([flags, name, method]) => {
+      const target = getHostListenerTarget(win.document, elm, flags) ;
+      const handler = hostListenerProxy(hostRef, method);
+      const opts = hostListenerOpts(flags);
+      plt.ael(target, name, handler, opts);
+      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+    });
+  }
+};
+var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  var _a;
+  try {
+    {
+      if (hostRef.$flags$ & 256 /* isListenReady */) {
+        (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
+      } else {
+        (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+      }
+    }
+  } catch (e) {
+    consoleError(e, hostRef.$hostElement$);
+  }
+};
+var getHostListenerTarget = (doc, elm, flags) => {
+  if (flags & 4 /* TargetDocument */) {
+    return doc;
+  }
+  return elm;
+};
+var hostListenerOpts = (flags) => supportsListenerOptions ? {
+  passive: (flags & 1 /* Passive */) !== 0,
+  capture: (flags & 2 /* Capture */) !== 0
+} : (flags & 2 /* Capture */) !== 0;
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
 exports.getElement = getElement;
 exports.globalScripts = globalScripts;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
-//# sourceMappingURL=index-DfEVhbS6.js.map
+//# sourceMappingURL=index-ybEiHT0b.js.map
 
-//# sourceMappingURL=index-DfEVhbS6.js.map
+//# sourceMappingURL=index-ybEiHT0b.js.map