@affinda/wc 0.0.15 → 0.0.16

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

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

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

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.js';
+
+const afTextImageNestCss = ".sc-af-text-image-nest-h{display:block;width:100%}.text-image-nest.sc-af-text-image-nest{width:100%;position:relative}.nest__content.sc-af-text-image-nest{display:flex;flex-direction:column;align-items:center;gap:48px}.nest__grid.sc-af-text-image-nest{display:grid;gap:40px;width:100%}.grid-single.sc-af-text-image-nest{grid-template-columns:1fr}.grid-grid-2.sc-af-text-image-nest{grid-template-columns:repeat(2, 1fr)}.grid-grid-3.sc-af-text-image-nest{grid-template-columns:repeat(3, 1fr)}.grid-grid-4.sc-af-text-image-nest{grid-template-columns:repeat(4, 1fr)}.grid-stacked.sc-af-text-image-nest{grid-template-columns:1fr;gap:48px}.nest__footer.sc-af-text-image-nest{display:flex;justify-content:center;gap:12px}.nest__footer.sc-af-text-image-nest:empty{display:none}@media (max-width: 768px){.nest__content.sc-af-text-image-nest{gap:32px}.nest__grid.sc-af-text-image-nest{grid-template-columns:1fr;gap:32px}.grid-stacked.sc-af-text-image-nest{gap:40px}.nest__footer.sc-af-text-image-nest{flex-direction:column;align-items:center}}.sc-af-text-image-nest-s>*{margin:0}";
+
+const AfTextImageNest = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Layout variant for the content grid
+         */
+        this.layout = 'grid-3';
+    }
+    render() {
+        const containerClasses = {
+            'text-image-nest': true,
+            [`layout-${this.layout}`]: true,
+        };
+        const gridClasses = {
+            'nest__grid': true,
+            [`grid-${this.layout}`]: true,
+        };
+        return (h(Host, { key: 'bad121a0f47a7711ea1586c316f3363dd5e252ba' }, h("div", { key: '43be16c007ea9b8c7baa75cb038a4bf154730980', class: containerClasses }, h("div", { key: 'da6148be4838273374c0c040b1bb3793f4d3472c', class: "nest__content" }, h("div", { key: 'bccad6fe0a18ccb503f740afc8862a99408f17d5', class: gridClasses }, h("slot", { key: 'b8707c094e88a7c6a09b8e8321ba8edc4d32eb2a' })), h("div", { key: 'bd902e59ee14c2e3d9e4a3bdceb3e9b1603929bb', class: "nest__footer" }, h("slot", { key: '96f63716916447a563125dae4073a0e472becfba', name: "buttons" }))))));
+    }
+};
+AfTextImageNest.style = afTextImageNestCss;
+
+export { AfTextImageNest as af_text_image_nest };
+//# sourceMappingURL=af-text-image-nest.entry.js.map

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

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

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

@@ -0,0 +1,61 @@
+import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.js';
+
+const afTextImageCss = ".sc-af-text-image-h{display:block;width:100%}.text-image.sc-af-text-image{display:flex;width:100%}.text-image--side-by-side.sc-af-text-image{flex-direction:row;align-items:flex-start;gap:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image{flex-direction:row-reverse}.text-image--image-right.sc-af-text-image{flex-direction:row}.text-image--full-width.sc-af-text-image{flex-direction:column;gap:var(--space-8, 32px)}.text-image__content.sc-af-text-image{display:flex;flex-direction:column;gap:56px;flex:1;min-width:0}.text-image--proportion-1-3.sc-af-text-image .text-image__content.sc-af-text-image{flex:2}.text-image--proportion-1-4.sc-af-text-image .text-image__content.sc-af-text-image{flex:3}.text-image--proportion-100.sc-af-text-image .text-image__content.sc-af-text-image{flex:none;width:100%}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image{padding-right:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding-left:var(--space-8, 32px)}.text-image--full-width.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__lockup.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%}.text-image__copy.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);max-width:840px;width:100%}.text-image__heading.sc-af-text-image{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-3-desktop, 34px);line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, #14343B);white-space:pre-wrap}.text-image__heading.sc-af-text-image:empty{display:none}.text-image__description.sc-af-text-image{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, #2B484F);white-space:pre-wrap}.text-image__description.sc-af-text-image:empty{display:none}.text-image__buttons.sc-af-text-image{display:block}.text-image__buttons.sc-af-text-image:empty{display:none}.text-image__image-wrapper.sc-af-text-image{flex-shrink:0;overflow:hidden;border-radius:var(--radius-md, 12px)}.text-image--proportion-1-3.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-1-4.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-100.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{width:100%}@media (max-width: 768px){.text-image--side-by-side.sc-af-text-image{flex-direction:column;gap:var(--space-6, 24px)}.text-image--image-left.sc-af-text-image,.text-image--image-right.sc-af-text-image{flex-direction:column}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image,.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__content.sc-af-text-image,.text-image__image-wrapper.sc-af-text-image{flex:none !important;width:100%}.text-image__heading.sc-af-text-image{font-size:var(--font-size-heading-3-mobile, 25px)}.text-image--proportion-100.sc-af-text-image .text-image__description.sc-af-text-image{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.text-image--proportion-100.sc-af-text-image .text-image__lockup.sc-af-text-image{gap:var(--space-3, 12px)}.text-image--proportion-100.sc-af-text-image .text-image__copy.sc-af-text-image{gap:var(--space-3, 12px)}.text-image__image-wrapper.sc-af-text-image{border-radius:var(--radius-sm, 8px)}}.sc-af-text-image-s>*{margin:0}.sc-af-text-image-s>p{margin:0}";
+
+const AfTextImage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Position of the image relative to the text content
+         */
+        this.imagePosition = 'right';
+        /**
+         * Proportion of the image in the layout
+         * - '1/3': Image takes 1/3 of the width (text takes 2/3)
+         * - '1/4': Image takes 1/4 of the width (text takes 3/4)
+         * - '100%': Image takes full width below text
+         */
+        this.imageProportion = '1/3';
+        /**
+         * Image alt text for accessibility
+         */
+        this.alt = '';
+        /**
+         * Whether to show a second typography lockup section
+         */
+        this.showSecondLockup = false;
+    }
+    render() {
+        const isFullWidth = this.imageProportion === '100%';
+        const isImageLeft = this.imagePosition === 'left';
+        const containerClasses = {
+            'text-image': true,
+            'text-image--full-width': isFullWidth,
+            'text-image--side-by-side': !isFullWidth,
+            'text-image--image-left': isImageLeft && !isFullWidth,
+            'text-image--image-right': !isImageLeft && !isFullWidth,
+            [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,
+        };
+        const renderTypographyLockup = (isSecond = false) => {
+            const prefix = isSecond ? 'second-' : '';
+            return (h("div", { class: `text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}` }, h("div", { class: "text-image__copy" }, h("div", { class: "text-image__heading" }, h("slot", { name: isSecond ? 'second-heading' : undefined })), h("div", { class: "text-image__description" }, h("slot", { name: `${prefix}description` }))), h("div", { class: "text-image__buttons" }, h("slot", { name: `${prefix}buttons` }))));
+        };
+        const renderImage = () => {
+            if (!this.src)
+                return null;
+            return (h("div", { class: "text-image__image-wrapper" }, h("af-image", { src: this.src, alt: this.alt })));
+        };
+        // For full-width layout, text is always above image
+        if (isFullWidth) {
+            return (h(Host, null, h("div", { class: containerClasses }, h("div", { class: "text-image__content" }, renderTypographyLockup(), this.showSecondLockup && renderTypographyLockup(true)), renderImage())));
+        }
+        // For side-by-side layouts
+        const textContent = (h("div", { class: "text-image__content" }, renderTypographyLockup(), this.showSecondLockup && renderTypographyLockup(true)));
+        const imageContent = renderImage();
+        return (h(Host, null, h("div", { class: containerClasses }, isImageLeft ? ([imageContent, textContent]) : ([textContent, imageContent]))));
+    }
+};
+AfTextImage.style = afTextImageCss;
+
+export { AfTextImage as af_text_image };
+//# sourceMappingURL=af-text-image.entry.js.map

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

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

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

@@ -0,0 +1,91 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.js';
+
+const afTextareaCss = ":host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));cursor:default}.required{color:var(--forms-fields-error, #be292a);margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--buttons-secondary-stroke, #14343b);outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));margin:0}.textarea-container{display:flex;background:var(--forms-fields-bg-default, #ffffff);border:1px solid var(--forms-fields-stroke-default, #d0d6d8);border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--forms-fields-bg-hover, #f3f5f5)}.textarea-container.focused{background:var(--forms-fields-bg-default, #ffffff);border-color:var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));box-shadow:0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b)}.textarea-container.error{border-color:var(--forms-fields-stroke-error, #be292a)}.textarea-container.disabled{background:var(--forms-fields-bg-disabled, #e8ebeb);border-color:var(--forms-fields-stroke-default, #d0d6d8);cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--forms-fields-placeholder, #60767b);opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--forms-fields-placeholder, #60767b);resize:none}.textarea:disabled::placeholder{color:var(--forms-fields-placeholder, #60767b)}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--forms-fields-error, #be292a)}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-error, #be292a)}";
+
+const AfTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afInput = createEvent(this, "afInput");
+        this.afBlur = createEvent(this, "afBlur");
+        this.afFocus = createEvent(this, "afFocus");
+        this.afInfoClick = createEvent(this, "afInfoClick");
+        /**
+         * The current value of the textarea
+         */
+        this.value = '';
+        /**
+         * Whether the textarea is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the textarea is required
+         */
+        this.required = false;
+        /**
+         * Whether the textarea is read-only
+         */
+        this.readonly = false;
+        /**
+         * Whether to show the info icon next to the label
+         */
+        this.showInfoIcon = false;
+        /**
+         * Number of visible rows (height)
+         */
+        this.rows = 4;
+        /**
+         * Whether the textarea is resizable
+         */
+        this.resize = 'vertical';
+        this.isFocused = false;
+        this.isHovered = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.afInput.emit({ value: this.value });
+        };
+        this.handleFocus = () => {
+            this.isFocused = true;
+            this.afFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.isFocused = false;
+            this.afBlur.emit();
+        };
+        this.handleMouseEnter = () => {
+            this.isHovered = true;
+        };
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+        };
+        this.handleInfoClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.afInfoClick.emit();
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        const hasValue = !!(this.value && this.value.length > 0);
+        const wrapperClasses = {
+            'textarea-wrapper': true,
+            'disabled': this.disabled,
+            'error': hasError,
+            'focused': this.isFocused,
+            'hovered': this.isHovered && !this.disabled && !this.isFocused,
+            'populated': hasValue
+        };
+        const textareaContainerClasses = {
+            'textarea-container': true,
+            'disabled': this.disabled,
+            'error': hasError,
+            'focused': this.isFocused,
+            'hovered': this.isHovered && !this.disabled && !this.isFocused
+        };
+        return (h(Host, { key: '84f322a374d364669942e9153c6ba42221af1059' }, h("div", { key: '4b5a62e919a479bcf741f2d1d9e39a7b0e1e49ac', class: wrapperClasses }, this.label && (h("div", { key: 'e73b88c28588b8f3e5b9823467e8c972fd671391', class: "label-row" }, h("label", { key: '01c16777469e037495997efc2cacc51778fcd9c7', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '6da50443dadd3a6eec5655b4ff2fa19affa38006', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: 'c731c726f54946273a330c0173f09faeb9fe583b', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '24a1ee4fb10ebd9a84a897cefef09ad7e7b63565', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3523e8495fc5ffa06d793318f55ba79043174931', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'd2caa0b33fccc6289f00fc22fc329df52d86a6ed', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'db8d8ee03abe2638265d192be6efb992a6041199', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '8325f2fc490d8261a596398da7cc68d74ccfce11', name: "label-end" }))), this.description && (h("p", { key: '7db9b0e06615f5a13b7759cd81c23ee6ab124769', class: "description" }, this.description)), h("div", { key: '939c306f7a56735956e2ef4badeb4cfa39abf759', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '0dffd719ed83955990ae1935fb8d39ab92fd9b94', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '1f7f83da7518216eb63ff9cb685ffb92b3b37fb1', class: "error-row", id: "error-message" }, h("span", { key: 'a1af53a449805506ac0abddae3a236232a538bd9', class: "error-icon" }, h("svg", { key: 'b52e5c14a8986c502e1e0dce8a95c7d381c7a8e3', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'af8c97b747c960065f7461e84c893e644b66d9c5', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '145226126e4ba52c6234b3c454e43d87b495789c', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '7b94917ac5c96c6abbfc93826b07fa967b49506a', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '9f097e0c43b1a6b19d0275fed8a216e901ce2d86', class: "error-text" }, this.error))))));
+    }
+};
+AfTextarea.style = afTextareaCss;
+
+export { AfTextarea as af_textarea };
+//# sourceMappingURL=af-textarea.entry.js.map

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

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

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-DI7b0bCy.js';
+import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.js';
 
-const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column;gap:40px}.text-left{align-items:flex-start}.text-center{align-items:center}.text-left .copy,.text-left .heading,.text-left .description{text-align:left}.text-center .copy,.text-center .heading,.text-center .description{text-align:center}.copy{display:flex;flex-direction:column;gap:16px;width:100%}.heading{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;color:var(--typography-heading-primary, #14343B);line-height:1;white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:56px;letter-spacing:-1.12px}.breakpoint-desktop.heading-2 .heading{font-size:44px;letter-spacing:-0.88px}.breakpoint-desktop.heading-3 .heading{font-size:34px;letter-spacing:-0.68px}.breakpoint-desktop.heading-4 .heading{font-size:24px;letter-spacing:-0.48px;line-height:1.2}.breakpoint-desktop.heading-5 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.2}.breakpoint-mobile.heading-1 .heading{font-size:38px;letter-spacing:-0.76px}.breakpoint-mobile.heading-2 .heading{font-size:32px;letter-spacing:-0.64px}.breakpoint-mobile.heading-3 .heading{font-size:25px;letter-spacing:-0.5px}.breakpoint-mobile.heading-4 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.1}.breakpoint-mobile.heading-5 .heading{font-size:18px;letter-spacing:-0.36px;line-height:1.1}.description{font-family:'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;font-size:18px;font-weight:400;line-height:26px;color:var(--typography-body-default, #2B484F);white-space:pre-wrap}.description:empty{display:none}.buttons{display:flex;gap:12px}.buttons:empty{display:none}.button-horizontal .buttons{flex-direction:row;align-items:center}.text-left.button-horizontal{flex-direction:row;align-items:center;gap:16px}.text-left.button-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.button-horizontal .buttons{flex-shrink:0}.button-vertical .buttons{flex-direction:row;align-items:flex-start}.text-center.button-vertical .buttons{align-items:center}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
+const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column}.breakpoint-desktop.heading-1.lockup{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1.lockup{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2.lockup,.breakpoint-desktop.heading-3.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3.lockup,.breakpoint-desktop.heading-4.lockup,.breakpoint-desktop.heading-5.lockup{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4.lockup,.breakpoint-mobile.heading-5.lockup{gap:var(--space-2, 8px)}.text-left{align-items:flex-start}.text-center{align-items:center}.text-left .copy,.text-left .heading,.text-left .description{text-align:left}.text-center .copy,.text-center .heading,.text-center .description{text-align:center}.copy{display:flex;flex-direction:column;width:100%;max-width:840px}.breakpoint-desktop.heading-1 .copy{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1 .copy{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2 .copy,.breakpoint-desktop.heading-3 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3 .copy,.breakpoint-desktop.heading-4 .copy,.breakpoint-desktop.heading-5 .copy{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4 .copy,.breakpoint-mobile.heading-5 .copy{gap:var(--space-2, 8px)}.heading{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:var(--font-size-heading-1-desktop, 56px)}.breakpoint-desktop.heading-2 .heading{font-size:var(--font-size-heading-2-desktop, 44px)}.breakpoint-desktop.heading-3 .heading{font-size:var(--font-size-heading-3-desktop, 34px)}.breakpoint-desktop.heading-4 .heading{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-desktop.heading-5 .heading{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-mobile.heading-1 .heading{font-size:var(--font-size-heading-1-mobile, 38px)}.breakpoint-mobile.heading-2 .heading{font-size:var(--font-size-heading-2-mobile, 32px)}.breakpoint-mobile.heading-3 .heading{font-size:var(--font-size-heading-3-mobile, 25px)}.breakpoint-mobile.heading-4 .heading{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}.breakpoint-mobile.heading-5 .heading{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}.description{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:var(--font-size-body-large, 18px);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));white-space:pre-wrap}.breakpoint-mobile.heading-3 .description,.breakpoint-desktop.heading-4 .description,.breakpoint-mobile.heading-4 .description,.breakpoint-desktop.heading-5 .description,.breakpoint-mobile.heading-5 .description{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.description:empty{display:none}.buttons{display:flex;gap:var(--space-3, 12px)}.buttons:empty{display:none}.button-horizontal .buttons{flex-direction:row;align-items:center}.text-left.button-horizontal{flex-direction:row;align-items:center;gap:var(--space-4, 16px)}.text-left.button-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.button-horizontal.heading-3 .copy,.text-left.button-horizontal.heading-4 .copy{max-width:840px}.text-left.button-horizontal .buttons{flex-shrink:0}.button-vertical .buttons{flex-direction:row;align-items:flex-start}.text-center.button-vertical .buttons{justify-content:center}.breakpoint-mobile .buttons{flex-direction:column;align-items:stretch}.breakpoint-mobile.text-center .buttons{align-items:center}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
 
 const AfTypographyLockup = class {
     constructor(hostRef) {
@@ -26,15 +26,15 @@ const AfTypographyLockup = class {
         const containerClasses = {
             'lockup': true,
             [`text-${this.textAlignment}`]: true,
-            [`button-${this.buttonAlignment}`]: true
-        };
-        const copyClasses = {
-            'copy': true,
+            [`button-${this.buttonAlignment}`]: true,
             [`heading-${this.headingSize}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
+        const copyClasses = {
+            'copy': true
+        };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: 'c8bc936e14d143125926e4cc03a3344911d46360' }, h("div", { key: '4c51fcb278daba5e4b8287130a1e61021750af18', class: containerClasses }, h("div", { key: '6d563b91c8b548a72f898978569bceda44a26b14', class: copyClasses, style: copyStyle }, h("div", { key: '6eb8a67a451643770caae7e1967a4d9be94548ac', class: "heading", part: "heading" }, h("slot", { key: '3dc8bdd804b8ccca68ec3f85ada6fca1560f8905' })), h("div", { key: '4e2ad38d585d392419ae8e596b6af226a48cffb1', class: "description", part: "body" }, h("slot", { key: 'f53fa56abca48a11b876368d7586a6f90bce5014', name: "description" }))), h("div", { key: 'b51f1178a58b9b48ed9ec1a76afbe09e2c78fd82', class: "buttons", part: "buttons" }, h("slot", { key: 'fb4b207a762e066f11ee3e36b570ec1c52e721f0', name: "buttons" })))));
+        return (h(Host, { key: '62d24f768270ca80fea5f47bbb98fcd51d1ce19f' }, h("div", { key: '7e4ce0a3702cd933d4c2cf902a9de7aa608d7f45', class: containerClasses }, h("div", { key: '2139a714f4c654343246ea9acc3a4158633fbea5', class: copyClasses, style: copyStyle }, h("div", { key: 'c912d098ef8ff24579a1798a04e636f3127b4142', class: "heading", part: "heading" }, h("slot", { key: '836fdd1778b706d239387845daa52fec6b38c8b8' })), h("div", { key: '4d1c9207a166aa4e717b655f8471de25bfb67c7a', class: "description", part: "body" }, h("slot", { key: 'f3d2f3fb15547ce230f868d92e14f0156d8a86b4', name: "description" }))), h("div", { key: '4567953f1da984155af2dce9f8eeda69201fd80a', class: "buttons", part: "buttons" }, h("slot", { key: 'ba914f51d04808f52deb6eb9dcecb40f9516057c', name: "buttons" })))));
     }
 };
 AfTypographyLockup.style = afTypographyLockupCss;

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

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

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

@@ -0,0 +1,33 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.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) {
+        registerInstance(this, hostRef);
+        this.playClick = 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 (h(Host, { key: 'b31355a1ccf3cc4f9655f9c78d16f70fb104a671' }, h("div", { key: 'ebd03ff2668174d400d3d09488030d38d1a25fe8', class: "video-container" }, h("div", { key: 'af32cf3f6fec012e95d35d4224daebdfd64917b5', class: "video-container__top" }, h("slot", { key: '0258f4b6a027b09ecefd4ff6c7f2a62db6075847', name: "top" })), h("div", { key: 'fb74dae0250cfdf22b8c5503cd993ac67894276e', class: "video-container__video" }, h("af-aspect-ratio", { key: '88445a4ae1125882d3dc8fffc83fb1f880857fae', ratio: "16:9" }, h("div", { key: 'd87f8d15036026b04330e23395f95ad8363d72a3', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'e1327574236c73cc6c5b5a7a820c3905d2307047', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'c278f6944c5d69fec242a8291655985a20a7896f', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: 'df9ca50c0938d8539c7a79fb6f5bceb6326ed96c', name: "play", size: 24 }))))), h("div", { key: '3e2ba7be65431315fd3996fdadfbc45acb1be76b', class: "video-container__bottom" }, h("slot", { key: '10d64457339942b3bde412a740a66bf9665e8033', name: "bottom" })))));
+    }
+};
+AfVideoContainer.style = afVideoContainerCss;
+
+export { AfVideoContainer as af_video_container };
+//# sourceMappingURL=af-video-container.entry.js.map

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

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

package/dist/esm/affinda.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DI7b0bCy.js';
-export { s as setNonce } from './index-DI7b0bCy.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-BmU_CFQ4.js';
+export { s as setNonce } from './index-BmU_CFQ4.js';
 
 /*
  Stencil Client Patch Browser v4.38.2 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["af-hero-section",[[262,"af-hero-section",{"variant":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"]}]]],["af-section",[[262,"af-section",{"padding":[1],"background":[1],"container":[4]}]]],["af-aspect-ratio",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"darkBackground":[4,"dark-background"]}]]],["af-button-group",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-client-carousel",[[257,"af-client-carousel",{"showHeadline":[4,"show-headline"],"headlineText":[1,"headline-text"]}]]],["af-color-swatch",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-cta-section",[[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",[[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",[[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",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-icon-button",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-logo-well",[[257,"af-logo-well"]]],["af-social-link",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-testimonial",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup",[[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",[[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",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
+  return bootstrapLazy([["af-testimonial",[[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",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-feature-card",[[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",[[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",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-testimonial-stat",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout",[[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",[[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",[[262,"af-section",{"padding":[1],"theme":[1],"container":[4]}]]],["af-split-section",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"navPrev","handleNavPrev"],[0,"navNext","handleNavNext"]]]]],["af-text-image",[[262,"af-text-image",{"imagePosition":[1,"image-position"],"imageProportion":[1,"image-proportion"],"src":[1],"alt":[1],"showSecondLockup":[4,"show-second-lockup"]}]]],["af-button-group",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-checkbox",[[257,"af-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[1],"value":[1]}]]],["af-client-carousel",[[257,"af-client-carousel",{"theme":[1]}]]],["af-color-swatch",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-feature-accordion",[[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",[[257,"af-fieldset",{"legend":[1],"orientation":[1],"disabled":[516]}]]],["af-footer",[[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",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-input",[[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",[[257,"af-logo-well"]]],["af-nav-card",[[257,"af-nav-card",{"heading":[1],"href":[1],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"isHovered":[32]}]]],["af-nav-menu",[[257,"af-nav-menu",{"heading":[1],"breakpoint":[1],"showBorder":[4,"show-border"],"cardStyle":[516,"card-style"]}]]],["af-nav-menu-nest",[[257,"af-nav-menu-nest",{"type":[1],"breakpoint":[1],"showSidebarBorder":[516,"show-sidebar-border"]}]]],["af-number-badge",[[257,"af-number-badge",{"number":[2],"variant":[1],"size":[2]}]]],["af-radio",[[257,"af-radio",{"checked":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-social-link",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-switch",[[257,"af-switch",{"active":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-tab",[[257,"af-tab",{"label":[1],"active":[516],"disabled":[516],"shape":[513],"displayIcon":[4,"display-icon"],"displayNumber":[4,"display-number"],"value":[1]}]]],["af-tab-bar",[[257,"af-tab-bar",{"shape":[513],"breakpoint":[513]},[[0,"keydown","handleKeyDown"]]]]],["af-tag",[[257,"af-tag",{"size":[1],"variant":[1],"href":[1]}]]],["af-text-image-nest",[[262,"af-text-image-nest",{"layout":[1]}]]],["af-textarea",[[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",[[258,"af-icon-box",{"icon":[1],"size":[1]}]]],["af-aspect-ratio",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-icon-button",[[257,"af-icon-button",{"variant":[513],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-image",[[258,"af-image",{"src":[1],"alt":[1]}]]],["af-button",[[257,"af-button",{"variant":[513],"size":[1],"disabled":[4],"type":[1],"href":[1],"hasIconLeft":[32],"hasIconRight":[32]}]]],["af-card",[[262,"af-card",{"theme":[1],"stretch":[516]}]]],["af-progress-line",[[258,"af-progress-line",{"progress":[2],"orientation":[1]}]]],["af-container",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-heading_5",[[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",[[257,"af-icon",{"name":[1],"size":[2],"label":[1]}]]],["af-typography-lockup",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
 });
 //# sourceMappingURL=affinda.js.map