@affinda/wc 0.0.20 → 0.0.21

package/dist/affinda/af-accordion-item.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-accordion-item.entry.esm.js","sources":["src/components/af-accordion-item/af-accordion-item.css?tag=af-accordion-item&encapsulation=shadow","src/components/af-accordion-item/af-accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.accordion-item {\n  width: 100%;\n}\n\n/* Trigger button - clickable header */\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 16px 0;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  color: var(--af-typography-body-dark, #14343b);\n  transition: background-color 0.2s ease;\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--af-background-base-hover, rgba(20, 52, 59, 0.02));\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--af-background-border-active, #8a7049);\n  outline-offset: -2px;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.trigger-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Chevron indicator */\n.chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  color: var(--af-typography-body-dark, #14343b);\n  transition: transform 0.3s ease;\n}\n\n.chevron.is-open {\n  transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n  overflow: hidden;\n  transition: max-height 0.3s ease;\n}\n\n.content {\n  padding: 0;\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n  background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n  border-bottom-color: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * A single collapsible accordion item with header and content.\n * Can be used standalone or within an af-accordion container.\n * \n * @slot trigger - The clickable header content\n * @slot - The collapsible content (default slot)\n */\n@Component({\n  tag: 'af-accordion-item',\n  styleUrl: 'af-accordion-item.css',\n  shadow: true,\n})\nexport class AfAccordionItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Unique identifier for this accordion item.\n   * Used by parent af-accordion to track open state.\n   */\n  @Prop({ reflect: true }) itemId!: string;\n\n  /**\n   * Whether this item is currently expanded\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  /**\n   * Whether this item is disabled (cannot be toggled)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ eventName: 'af-accordion-toggle' }) accordionToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n  @State() contentHeight: number = 0;\n\n  private contentRef?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.measureContent();\n    }\n  }\n\n  componentDidLoad() {\n    // #region agent log\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:componentDidLoad',message:'Component loaded',data:{itemId:this.itemId,hasShadowRoot:!!this.el.shadowRoot},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'E'})}).catch(()=>{});\n    // #endregion\n\n    // #region agent log\n    const shadowRoot = this.el.shadowRoot;\n    const triggerSlot = shadowRoot?.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement | null;\n    const assignedNodes = triggerSlot?.assignedNodes() || [];\n    const assignedElements = triggerSlot?.assignedElements() || [];\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:componentDidLoad:slotCheck',message:'Checking trigger slot content',data:{hasTriggerSlot:!!triggerSlot,assignedNodesCount:assignedNodes.length,assignedElementsCount:assignedElements.length,assignedContent:assignedElements.map(el => ({tagName:(el as Element).tagName,textContent:(el as Element).textContent}))},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'A'})}).catch(()=>{});\n    // #endregion\n\n    // #region agent log\n    const triggerContent = shadowRoot?.querySelector('.trigger-content') as HTMLElement | null;\n    const triggerContentStyles = triggerContent ? getComputedStyle(triggerContent) : null;\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:componentDidLoad:styleCheck',message:'Checking trigger-content styles',data:{hasTriggerContent:!!triggerContent,width:triggerContent?.offsetWidth,height:triggerContent?.offsetHeight,color:triggerContentStyles?.color,display:triggerContentStyles?.display,visibility:triggerContentStyles?.visibility},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'B,C'})}).catch(()=>{});\n    // #endregion\n\n    // #region agent log\n    const lightDomChildren = Array.from(this.el.children);\n    const slottedTrigger = this.el.querySelector('[slot=\"trigger\"]');\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:componentDidLoad:lightDomCheck',message:'Checking light DOM for slotted content',data:{lightDomChildCount:lightDomChildren.length,lightDomTags:lightDomChildren.map(c => c.tagName),hasSlottedTrigger:!!slottedTrigger,slottedTriggerText:slottedTrigger?.textContent},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'D'})}).catch(()=>{});\n    // #endregion\n\n    if (this.open) {\n      this.measureContent();\n    }\n    \n    // Set up ResizeObserver to handle dynamic content changes\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.open && this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n    \n    if (this.contentRef) {\n      this.resizeObserver.observe(this.contentRef);\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up ResizeObserver\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  /**\n   * Programmatically toggle the accordion item\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled) {\n      this.open = !this.open;\n      this.accordionToggle.emit({ itemId: this.itemId, open: this.open });\n    }\n  }\n\n  private measureContent() {\n    // Use requestAnimationFrame to ensure DOM has updated before measuring\n    requestAnimationFrame(() => {\n      if (this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n  }\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.toggle();\n    }\n  };\n\n  render() {\n    // #region agent log\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:render',message:'Render called',data:{itemId:this.itemId,open:this.open},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'E'})}).catch(()=>{});\n    // #endregion\n\n    const contentStyle = {\n      maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n    };\n\n    return (\n      <Host class={{ 'is-open': this.open, 'is-disabled': this.disabled }}>\n        <div class=\"accordion-item\">\n          <button\n            class=\"trigger\"\n            onClick={this.handleTriggerClick}\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-controls={`content-${this.itemId}`}\n            disabled={this.disabled}\n            type=\"button\"\n          >\n            <div class=\"trigger-content\">\n              <slot name=\"trigger\"></slot>\n            </div>\n            <div class={{ 'chevron': true, 'is-open': this.open }}>\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </div>\n          </button>\n          <div\n            id={`content-${this.itemId}`}\n            class=\"content-wrapper\"\n            style={contentStyle}\n            aria-hidden={!this.open ? 'true' : 'false'}\n          >\n            <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,8oCAA8oC;;MCc5pC,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAcE;;AAEG;AACqC,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAE7D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOzC,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAgF1B,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,MAAM,EAAE;;AAEjB,SAAC;AA6CF;AA3HC,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,cAAc,EAAE;;;IAIzB,gBAAgB,GAAA;;AAEd,QAAA,KAAK,CAAC,mEAAmE,EAAC,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,EAAC,cAAc,EAAC,kBAAkB,EAAC,EAAC,IAAI,EAAC,IAAI,CAAC,SAAS,CAAC,EAAC,QAAQ,EAAC,wCAAwC,EAAC,OAAO,EAAC,kBAAkB,EAAC,IAAI,EAAC,EAAC,MAAM,EAAC,IAAI,CAAC,MAAM,EAAC,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,EAAC,EAAC,SAAS,EAAC,IAAI,CAAC,GAAG,EAAE,EAAC,SAAS,EAAC,eAAe,EAAC,YAAY,EAAC,GAAG,EAAC,CAAC,EAAC,CAAC,CAAC,KAAK,CAAC,MAAK,GAAC,CAAC;;;AAIrX,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU;QACrC,MAAM,WAAW,GAAG,UAAU,EAAE,aAAa,CAAC,sBAAsB,CAA2B;QAC/F,MAAM,aAAa,GAAG,WAAW,EAAE,aAAa,EAAE,IAAI,EAAE;QACxD,MAAM,gBAAgB,GAAG,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE;QAC9D,KAAK,CAAC,mEAAmE,EAAC,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,EAAC,cAAc,EAAC,kBAAkB,EAAC,EAAC,IAAI,EAAC,IAAI,CAAC,SAAS,CAAC,EAAC,QAAQ,EAAC,kDAAkD,EAAC,OAAO,EAAC,+BAA+B,EAAC,IAAI,EAAC,EAAC,cAAc,EAAC,CAAC,CAAC,WAAW,EAAC,kBAAkB,EAAC,aAAa,CAAC,MAAM,EAAC,qBAAqB,EAAC,gBAAgB,CAAC,MAAM,EAAC,eAAe,EAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,KAAK,EAAC,OAAO,EAAE,EAAc,CAAC,OAAO,EAAC,WAAW,EAAE,EAAc,CAAC,WAAW,EAAC,CAAC,CAAC,EAAC,EAAC,SAAS,EAAC,IAAI,CAAC,GAAG,EAAE,EAAC,SAAS,EAAC,eAAe,EAAC,YAAY,EAAC,GAAG,EAAC,CAAC,EAAC,CAAC,CAAC,KAAK,CAAC,MAAI,GAAE,CAAC;;;QAIjkB,MAAM,cAAc,GAAG,UAAU,EAAE,aAAa,CAAC,kBAAkB,CAAuB;AAC1F,QAAA,MAAM,oBAAoB,GAAG,cAAc,GAAG,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;QACrF,KAAK,CAAC,mEAAmE,EAAC,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,EAAC,cAAc,EAAC,kBAAkB,EAAC,EAAC,IAAI,EAAC,IAAI,CAAC,SAAS,CAAC,EAAC,QAAQ,EAAC,mDAAmD,EAAC,OAAO,EAAC,iCAAiC,EAAC,IAAI,EAAC,EAAC,iBAAiB,EAAC,CAAC,CAAC,cAAc,EAAC,KAAK,EAAC,cAAc,EAAE,WAAW,EAAC,MAAM,EAAC,cAAc,EAAE,YAAY,EAAC,KAAK,EAAC,oBAAoB,EAAE,KAAK,EAAC,OAAO,EAAC,oBAAoB,EAAE,OAAO,EAAC,UAAU,EAAC,oBAAoB,EAAE,UAAU,EAAC,EAAC,SAAS,EAAC,IAAI,CAAC,GAAG,EAAE,EAAC,SAAS,EAAC,eAAe,EAAC,YAAY,EAAC,KAAK,EAAC,CAAC,EAAC,CAAC,CAAC,KAAK,CAAC,MAAI,GAAE,CAAC;;;AAIxjB,QAAA,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;QACrD,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;QAChE,KAAK,CAAC,mEAAmE,EAAC,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,EAAC,cAAc,EAAC,kBAAkB,EAAC,EAAC,IAAI,EAAC,IAAI,CAAC,SAAS,CAAC,EAAC,QAAQ,EAAC,sDAAsD,EAAC,OAAO,EAAC,wCAAwC,EAAC,IAAI,EAAC,EAAC,kBAAkB,EAAC,gBAAgB,CAAC,MAAM,EAAC,YAAY,EAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAC,iBAAiB,EAAC,CAAC,CAAC,cAAc,EAAC,kBAAkB,EAAC,cAAc,EAAE,WAAW,EAAC,EAAC,SAAS,EAAC,IAAI,CAAC,GAAG,EAAE,EAAC,SAAS,EAAC,eAAe,EAAC,YAAY,EAAC,GAAG,EAAC,CAAC,EAAC,CAAC,CAAC,KAAK,CAAC,MAAI,GAAE,CAAC;;AAGlhB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,cAAc,EAAE;;;AAIvB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC5C,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;gBAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY;;AAErD,SAAC,CAAC;AAEF,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAIhD,oBAAoB,GAAA;;AAElB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;;AAIpC;;AAEG;AAEH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACtB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;;IAI/D,cAAc,GAAA;;QAEpB,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY;;AAErD,SAAC,CAAC;;IASJ,MAAM,GAAA;;AAEJ,QAAA,KAAK,CAAC,mEAAmE,EAAC,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,EAAC,cAAc,EAAC,kBAAkB,EAAC,EAAC,IAAI,EAAC,IAAI,CAAC,SAAS,CAAC,EAAC,QAAQ,EAAC,8BAA8B,EAAC,OAAO,EAAC,eAAe,EAAC,IAAI,EAAC,EAAC,MAAM,EAAC,IAAI,CAAC,MAAM,EAAC,IAAI,EAAC,IAAI,CAAC,IAAI,EAAC,EAAC,SAAS,EAAC,IAAI,CAAC,GAAG,EAAE,EAAC,SAAS,EAAC,eAAe,EAAC,YAAY,EAAC,GAAG,EAAC,CAAC,EAAC,CAAC,CAAC,KAAK,CAAC,MAAK,GAAC,CAAC;;AAGpV,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,CAAG,EAAA,IAAI,CAAC,aAAa,CAAA,EAAA,CAAI,GAAG;SACpD;AAED,QAAA,QACE,CAAC,CAAA,IAAI,qDAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EACjE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,eAAA,EACjB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC5B,eAAA,EAAA,CAAW,QAAA,EAAA,IAAI,CAAC,MAAM,CAAA,CAAE,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EACnD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,CAAE,CACpF,CACF,CACC,EACT,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,MAAM,CAAE,CAAA,EAC5B,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,YAAY,EACN,aAAA,EAAA,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAA,EAE1C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EAAA,EACtD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;"}
+{"version":3,"file":"af-accordion-item.entry.esm.js","sources":["src/components/af-accordion-item/af-accordion-item.css?tag=af-accordion-item&encapsulation=shadow","src/components/af-accordion-item/af-accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.accordion-item {\n  width: 100%;\n}\n\n/* Trigger button - clickable header */\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 16px 0;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  color: var(--af-typography-body-dark, #14343b);\n  transition: background-color 0.2s ease;\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--af-background-base-hover, rgba(20, 52, 59, 0.02));\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--af-background-border-active, #8a7049);\n  outline-offset: -2px;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.trigger-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Chevron indicator */\n.chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  color: var(--af-typography-body-dark, #14343b);\n  transition: transform 0.3s ease;\n}\n\n.chevron.is-open {\n  transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n  overflow: hidden;\n  transition: max-height 0.3s ease;\n}\n\n.content {\n  padding: 0;\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n  background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n  border-bottom-color: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * A single collapsible accordion item with header and content.\n * Can be used standalone or within an af-accordion container.\n *\n * @slot trigger - The clickable header content\n * @slot - The collapsible content (default slot)\n */\n@Component({\n  tag: 'af-accordion-item',\n  styleUrl: 'af-accordion-item.css',\n  shadow: true,\n})\nexport class AfAccordionItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Unique identifier for this accordion item.\n   * Used by parent af-accordion to track open state.\n   */\n  @Prop({ reflect: true }) itemId!: string;\n\n  /**\n   * Whether this item is currently expanded\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  /**\n   * Whether this item is disabled (cannot be toggled)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ eventName: 'af-accordion-toggle' }) accordionToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n  @State() contentHeight: number = 0;\n\n  private contentRef?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.measureContent();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      this.measureContent();\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.open && this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n\n    if (this.contentRef) {\n      this.resizeObserver.observe(this.contentRef);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  /**\n   * Programmatically toggle the accordion item\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled) {\n      this.open = !this.open;\n      this.accordionToggle.emit({ itemId: this.itemId, open: this.open });\n    }\n  }\n\n  private measureContent() {\n    requestAnimationFrame(() => {\n      if (this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n  }\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.toggle();\n    }\n  };\n\n  render() {\n    const contentStyle = {\n      maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n    };\n\n    return (\n      <Host class={{ 'is-open': this.open, 'is-disabled': this.disabled }}>\n        <div class=\"accordion-item\">\n          <button\n            class=\"trigger\"\n            onClick={this.handleTriggerClick}\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-controls={`content-${this.itemId}`}\n            disabled={this.disabled}\n            type=\"button\"\n          >\n            <div class=\"trigger-content\">\n              <slot name=\"trigger\"></slot>\n            </div>\n            <div class={{ 'chevron': true, 'is-open': this.open }}>\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </div>\n          </button>\n          <div\n            id={`content-${this.itemId}`}\n            class=\"content-wrapper\"\n            style={contentStyle}\n            aria-hidden={!this.open ? 'true' : 'false'}\n          >\n            <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"af-button.entry.esm.js","sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content (icons) inheritance */\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"tertiary\"]) {\n  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n/* Full-width mode - when host is display: block */\n:host([full-width]),\n:host(.full-width) {\n  display: block;\n  width: 100%;\n}\n\n:host([full-width]) .button,\n:host(.full-width) .button {\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border-radius: 9999px;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  white-space: nowrap;\n  /* Allow width to be controlled from outside via CSS custom property */\n  width: var(--af-button-width, auto);\n}\n\n/* Size variants */\n.size-default {\n  padding: 12px 24px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.size-small {\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n/* Icon slots - only show when they have slotted content */\n.icon-left,\n.icon-right {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-left.has-content,\n.icon-right.has-content {\n  display: flex;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n  width: 24px;\n  height: 24px;\n}\n\n.size-small .icon-left,\n.size-small .icon-right {\n  width: 20px;\n  height: 20px;\n}\n\n/* Add spacing between icon and label only when icon is present */\n.size-default .icon-left.has-content {\n  margin-right: 12px;\n}\n\n.size-default .icon-right.has-content {\n  margin-left: 12px;\n}\n\n.size-small .icon-left.has-content {\n  margin-right: 8px;\n}\n\n.size-small .icon-right.has-content {\n  margin-left: 8px;\n}\n\n/* Label styling */\n.label {\n  flex: 0 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.size-default .label {\n  height: 24px;\n}\n\n.size-small .label {\n  height: 20px;\n}\n\n/* ==========================================================================\n   Primary Button\n   Filled background with ice color, inkwell text\n   ========================================================================== */\n\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary .icon-left,\n.variant-primary .icon-right {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n  border-color: var(--af-button-primary-stroke, #14343B);\n}\n\n.variant-primary:focus:not(.disabled),\n.variant-primary:focus-visible:not(.disabled) {\n  background: var(--af-button-primary-bg, #A6FFFB);\n  border-color: var(--af-button-primary-stroke, #14343B);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);\n  outline: none;\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n}\n\n/* ==========================================================================\n   Secondary Button\n   Transparent background with visible border\n   ========================================================================== */\n\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary .icon-left,\n.variant-secondary .icon-right {\n  color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n  border-color: var(--af-button-secondary-stroke, currentColor);\n}\n\n.variant-secondary:focus:not(.disabled),\n.variant-secondary:focus-visible:not(.disabled) {\n  background: var(--af-background-base, #FFF);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);\n  outline: none;\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* ==========================================================================\n   Tertiary Button\n   Text-only link style with underline, no border or background\n   ========================================================================== */\n\n.variant-tertiary {\n  background: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343b));\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.variant-tertiary .label {\n  border-bottom: 2px solid var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-tertiary .icon-left,\n.variant-tertiary .icon-right {\n  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-tertiary:focus:not(.disabled),\n.variant-tertiary:focus-visible:not(.disabled) {\n  outline: none;\n}\n\n.variant-tertiary:focus-visible:not(.disabled) .label {\n  box-shadow: 0 4px 0 0 var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-tertiary:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Disabled states\n   ========================================================================== */\n\n.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.variant-primary.disabled {\n  border: 1px solid var(--af-button-primary-stroke, #14343B);\n  background: var(--af-button-primary-bg, #A6FFFB);\n  opacity: 0.6;\n}\n\n.variant-secondary.disabled {\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  opacity: 0.6;\n}\n\n.variant-tertiary.disabled {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Reset button element styles\n   ========================================================================== */\n\nbutton.button {\n  font: inherit;\n  cursor: pointer;\n}\n\nbutton.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-tertiary {\n  background: transparent;\n  border: none;\n}\n\n/* ==========================================================================\n   Reset anchor element styles (when using href prop)\n   ========================================================================== */\n\na.button {\n  text-decoration: none;\n  color: inherit;\n}\n\na.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-tertiary {\n  background: transparent;\n  border: none;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `tertiary` - Subtle text-link style with underline\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs\n   * - `small` - Compact size for inline or secondary contexts\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,k9KAAk9K;;MCgBz9K,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAO7C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;QAE9B,IAAgB,CAAA,gBAAA,GAAG,CAAC,QAAoC,KAAK,CAAC,KAAY,KAAI;AACpF,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,YAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;iBACxB;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,UAAU;;AAElC,SAAC;AAyCF;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS;SAErF;;QAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;"}
+{"version":3,"file":"af-button.entry.esm.js","sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content (icons) inheritance */\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"ghost\"]) {\n  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n/* Full-width mode - when host is display: block */\n:host([full-width]),\n:host(.full-width) {\n  display: block;\n  width: 100%;\n}\n\n:host([full-width]) .button,\n:host(.full-width) .button {\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border-radius: 9999px;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  white-space: nowrap;\n  /* Allow width to be controlled from outside via CSS custom property */\n  width: var(--af-button-width, auto);\n}\n\n/* Size variants */\n.size-default {\n  padding: 12px 24px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.size-thin {\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n/* Icon slots - only show when they have slotted content */\n.icon-left,\n.icon-right {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-left.has-content,\n.icon-right.has-content {\n  display: flex;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n  width: 24px;\n  height: 24px;\n}\n\n.size-thin .icon-left,\n.size-thin .icon-right {\n  width: 20px;\n  height: 20px;\n}\n\n/* Add spacing between icon and label only when icon is present */\n.size-default .icon-left.has-content {\n  margin-right: 12px;\n}\n\n.size-default .icon-right.has-content {\n  margin-left: 12px;\n}\n\n.size-thin .icon-left.has-content {\n  margin-right: 8px;\n}\n\n.size-thin .icon-right.has-content {\n  margin-left: 8px;\n}\n\n/* Label styling */\n.label {\n  flex: 0 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.size-default .label {\n  height: 24px;\n}\n\n.size-thin .label {\n  height: 20px;\n}\n\n/* ==========================================================================\n   Primary Button\n   Filled background with ice color, inkwell text\n   ========================================================================== */\n\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary .icon-left,\n.variant-primary .icon-right {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n  border-color: var(--af-button-primary-stroke, #14343B);\n}\n\n.variant-primary:focus:not(.disabled),\n.variant-primary:focus-visible:not(.disabled) {\n  background: var(--af-button-primary-bg, #A6FFFB);\n  border-color: var(--af-button-primary-stroke, #14343B);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);\n  outline: none;\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n}\n\n/* ==========================================================================\n   Secondary Button\n   Transparent background with visible border\n   ========================================================================== */\n\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary .icon-left,\n.variant-secondary .icon-right {\n  color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n  border-color: var(--af-button-secondary-stroke, currentColor);\n}\n\n.variant-secondary:focus:not(.disabled),\n.variant-secondary:focus-visible:not(.disabled) {\n  background: var(--af-background-base, #FFF);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);\n  outline: none;\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* ==========================================================================\n   Tertiary Button\n   Text-only link style with underline, no border or background\n   ========================================================================== */\n\n.variant-ghost {\n  background: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343b));\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.variant-ghost .label {\n  border-bottom: 2px solid var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost .icon-left,\n.variant-ghost .icon-right {\n  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-ghost:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-ghost:focus:not(.disabled),\n.variant-ghost:focus-visible:not(.disabled) {\n  outline: none;\n}\n\n.variant-ghost:focus-visible:not(.disabled) .label {\n  box-shadow: 0 4px 0 0 var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Disabled states\n   ========================================================================== */\n\n.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.variant-primary.disabled {\n  border: 1px solid var(--af-button-primary-stroke, #14343B);\n  background: var(--af-button-primary-bg, #A6FFFB);\n  opacity: 0.6;\n}\n\n.variant-secondary.disabled {\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  opacity: 0.6;\n}\n\n.variant-ghost.disabled {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Reset button element styles\n   ========================================================================== */\n\nbutton.button {\n  font: inherit;\n  cursor: pointer;\n}\n\nbutton.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-ghost {\n  background: transparent;\n  border: none;\n}\n\n/* ==========================================================================\n   Reset anchor element styles (when using href prop)\n   ========================================================================== */\n\na.button {\n  text-decoration: none;\n  color: inherit;\n}\n\na.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-ghost {\n  background: transparent;\n  border: none;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `ghost` - Link-style with themed underline on the label; commonly paired\n   *   with a right-pointing icon. Matches Webflow's \"button ghost\" variant.\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs (12/24px padding)\n   * - `thin` - Compact inline/secondary size (8/16px padding)\n   */\n  @Prop() size: 'default' | 'thin' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,s5KAAs5K;;MCgB75K,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAsC,SAAS;AAE/E;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,SAAS;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAO7C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;QAE9B,IAAgB,CAAA,gBAAA,GAAG,CAAC,QAAoC,KAAK,CAAC,KAAY,KAAI;AACpF,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,YAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;iBACxB;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,UAAU;;AAElC,SAAC;AAyCF;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS;SAErF;;QAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"af-card.entry.esm.js","sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,u/FAAu/F;;MCe5/F,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}
+{"version":3,"file":"af-card.entry.esm.js","sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,i/FAAi/F;;MCet/F,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"af-client-carousel.entry.esm.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=shadow","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.client-carousel {\n  padding: 48px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4, 16px);\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-row {\n  display: flex;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.logo-track {\n  display: flex;\n  gap: var(--space-4, 16px);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n  animation-name: scroll-left;\n  animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n  animation-name: scroll-right;\n  animation-duration: 40s;\n}\n\n/* Pause animation on hover */\n:host(:hover) .logo-track {\n  animation-play-state: paused;\n}\n\n@keyframes scroll-left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n\n@keyframes scroll-right {\n  0% {\n    transform: translateX(-50%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n/* Style slotted container divs as flex rows with proper gap */\n::slotted(*) {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--space-4, 16px);\n  align-items: center;\n}\n\n/* ==========================================================================\n   Theme Variants\n   ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n  --af-carousel-logo-color: white;\n  --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n   Responsive Adjustments\n   ========================================================================== */\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .client-carousel {\n    padding: 32px 0;\n  }\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n  .client-carousel {\n    padding: 24px 0;\n  }\n  \n  .carousel-container {\n    gap: var(--space-3, 12px);\n  }\n  \n  .logo-track {\n    gap: var(--space-3, 12px);\n  }\n  \n  ::slotted(*) {\n    gap: var(--space-3, 12px);\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n/**\n * Infinite scrolling carousel for client logos.\n * \n * This is a section-level component that spans full width.\n * It supports theming via the `theme` prop.\n * \n * For headlines, use a separate TypographyLockup or Heading component above this carousel.\n */\n@Component({\n  tag: 'af-client-carousel',\n  styleUrl: 'af-client-carousel.css',\n  shadow: true,\n})\nexport class AfClientCarousel {\n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: Theme = 'inkwell';\n\n  render() {\n    return (\n      <Host class={`theme-${this.theme}`}>\n        <div class={`client-carousel theme-${this.theme}`}>\n          <div class=\"carousel-container\">\n            {/* Top row - scrolls left */}\n            <div class=\"carousel-row scroll-left\">\n              <div class=\"logo-track\">\n                <slot name=\"row-1\"></slot>\n                <slot name=\"row-1\"></slot>\n              </div>\n            </div>\n            \n            {/* Bottom row - scrolls right */}\n            <div class=\"carousel-row scroll-right\">\n              <div class=\"logo-track\">\n                <slot name=\"row-2\"></slot>\n                <slot name=\"row-2\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,46EAA46E;;MCiB37E,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AA2BjC;IAzBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,sBAAA,EAAyB,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC/C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAE7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACF,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACF,CACF,CACD;;;;;;;"}
+{"version":3,"file":"af-client-carousel.entry.esm.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=shadow","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.client-carousel {\n  padding: 48px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4, 16px);\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-row {\n  display: flex;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.logo-track {\n  display: flex;\n  gap: var(--space-4, 16px);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n  animation-name: scroll-left;\n  animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n  animation-name: scroll-right;\n  animation-duration: 40s;\n}\n\n/* Pause animation on hover */\n:host(:hover) .logo-track {\n  animation-play-state: paused;\n}\n\n@keyframes scroll-left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n\n@keyframes scroll-right {\n  0% {\n    transform: translateX(-50%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n/* Style slotted container divs as flex rows with proper gap */\n::slotted(*) {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--space-4, 16px);\n  align-items: center;\n}\n\n/* ==========================================================================\n   Theme Variants\n   ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n  --af-carousel-logo-color: white;\n  --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n   Responsive Adjustments\n   ========================================================================== */\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .client-carousel {\n    padding: 32px 0;\n  }\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n  .client-carousel {\n    padding: 24px 0;\n  }\n  \n  .carousel-container {\n    gap: var(--space-3, 12px);\n  }\n  \n  .logo-track {\n    gap: var(--space-3, 12px);\n  }\n  \n  ::slotted(*) {\n    gap: var(--space-3, 12px);\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n/**\n * Infinite scrolling carousel for client logos.\n *\n * This is a section-level component that spans full width.\n * Renders one or two scrolling rows; single row matches the Webflow reference,\n * two rows (scrolling opposite directions) is the denser variant.\n *\n * For headlines, use a separate TypographyLockup or Heading component above this carousel.\n */\n@Component({\n  tag: 'af-client-carousel',\n  styleUrl: 'af-client-carousel.css',\n  shadow: true,\n})\nexport class AfClientCarousel {\n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: Theme = 'inkwell';\n\n  /**\n   * Number of scrolling rows.\n   * - `1` (default) — single row scrolling left, matches the Webflow reference.\n   * - `2` — two rows scrolling in opposite directions.\n   *\n   * When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n   * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n   */\n  @Prop() rows: 1 | 2 = 1;\n\n  render() {\n    const rows = Number(this.rows);\n    return (\n      <Host class={`theme-${this.theme}`}>\n        <div class={`client-carousel theme-${this.theme} rows-${rows}`}>\n          <div class=\"carousel-container\">\n            <div class=\"carousel-row scroll-left\">\n              <div class=\"logo-track\">\n                <slot name=\"row-1\">\n                  <slot></slot>\n                </slot>\n                <slot name=\"row-1\">\n                  <slot></slot>\n                </slot>\n              </div>\n            </div>\n\n            {rows === 2 && (\n              <div class=\"carousel-row scroll-right\">\n                <div class=\"logo-track\">\n                  <slot name=\"row-2\"></slot>\n                  <slot name=\"row-2\"></slot>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,46EAA46E;;MCkB37E,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;;;;;;AAOG;AACK,QAAA,IAAI,CAAA,IAAA,GAAU,CAAC;AAgCxB;IA9BC,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,yBAAyB,IAAI,CAAC,KAAK,CAAA,MAAA,EAAS,IAAI,CAAA,CAAE,EAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH,CACF,EAEL,IAAI,KAAK,CAAC,KACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACP,CACG,CACF,CACD;;;;;;;"}

package/dist/affinda/af-icon-button.entry.esm.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"af-icon-text.entry.esm.js","sources":["src/components/af-icon-text/af-icon-text.css?tag=af-icon-text&encapsulation=scoped","src/components/af-icon-text/af-icon-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.icon-text {\n  display: flex;\n  width: 100%;\n}\n\n/* Vertical orientation - icon above text */\n.icon-text--vertical {\n  flex-direction: column;\n  gap: 24px;\n  align-items: flex-start;\n}\n\n/* Horizontal orientation - icon beside text */\n.icon-text--horizontal {\n  flex-direction: row;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.icon-text__icon {\n  flex-shrink: 0;\n}\n\n.icon-text__lockup {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .icon-text--vertical {\n    gap: 20px;\n  }\n\n  .icon-text--horizontal {\n    gap: 16px;\n  }\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconText molecule - combines an IconBox with a TypographyLockup for feature items.\n * \n * Composes:\n * - af-icon-box: Themed icon container\n * - af-typography-lockup: Heading, description, and button slots\n * \n * Inherits theme colors from parent Section via CSS custom properties.\n * \n * @slot - Heading text content (passed to TypographyLockup)\n * @slot description - Body/description text\n * @slot buttons - Action buttons (typically tertiary style)\n * \n * @example\n * ```html\n * <af-icon-text icon=\"settings\" heading-size=\"4\">\n *   Feature Heading\n *   <span slot=\"description\">Feature description text.</span>\n *   <af-button slot=\"buttons\" variant=\"tertiary\">Learn more</af-button>\n * </af-icon-text>\n * ```\n */\n@Component({\n  tag: 'af-icon-text',\n  styleUrl: 'af-icon-text.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconText {\n  /**\n   * The icon name to display in the IconBox\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Heading size for the typography lockup (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 4;\n\n  /**\n   * Layout orientation\n   * - 'vertical': Icon above text (default, used in grid layouts)\n   * - 'horizontal': Icon beside text (used in compact layouts)\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Size of the icon box\n   */\n  @Prop() iconSize: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-text': true,\n      [`icon-text--${this.orientation}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon-box \n            icon={this.icon} \n            size={this.iconSize}\n            class=\"icon-text__icon\"\n          ></af-icon-box>\n          \n          <af-typography-lockup\n            headingSize={this.headingSize}\n            textAlignment=\"left\"\n            buttonAlignment=\"vertical\"\n            class=\"icon-text__lockup\"\n          >\n            <slot></slot>\n            <span slot=\"description\">\n              <slot name=\"description\"></slot>\n            </span>\n            <span slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </span>\n          </af-typography-lockup>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,yeAAye;;MC+Blf,UAAU,GAAA,MAAA;AANvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkC,SAAS;AAmC5D;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,CAAC,cAAc,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;SACzC;AAED,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,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,iBAAiB,EACV,CAAA,EAEf,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,mBAAmB,EAAA,EAEzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC3B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACvB,CACc,CACnB,CACD;;;;;;;"}
+{"version":3,"file":"af-icon-text.entry.esm.js","sources":["src/components/af-icon-text/af-icon-text.css?tag=af-icon-text&encapsulation=scoped","src/components/af-icon-text/af-icon-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.icon-text {\n  display: flex;\n  width: 100%;\n}\n\n/* Vertical orientation - icon above text */\n.icon-text--vertical {\n  flex-direction: column;\n  gap: 24px;\n  align-items: flex-start;\n}\n\n/* Horizontal orientation - icon beside text */\n.icon-text--horizontal {\n  flex-direction: row;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.icon-text__icon {\n  flex-shrink: 0;\n}\n\n.icon-text__lockup {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .icon-text--vertical {\n    gap: 20px;\n  }\n\n  .icon-text--horizontal {\n    gap: 16px;\n  }\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconText molecule - combines an IconBox with a TypographyLockup for feature items.\n * \n * Composes:\n * - af-icon-box: Themed icon container\n * - af-typography-lockup: Heading, description, and button slots\n * \n * Inherits theme colors from parent Section via CSS custom properties.\n * \n * @slot - Heading text content (passed to TypographyLockup)\n * @slot description - Body/description text\n * @slot buttons - Action buttons (typically ghost style)\n * \n * @example\n * ```html\n * <af-icon-text icon=\"settings\" heading-size=\"4\">\n *   Feature Heading\n *   <span slot=\"description\">Feature description text.</span>\n *   <af-button slot=\"buttons\" variant=\"ghost\">Learn more</af-button>\n * </af-icon-text>\n * ```\n */\n@Component({\n  tag: 'af-icon-text',\n  styleUrl: 'af-icon-text.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconText {\n  /**\n   * The icon name to display in the IconBox\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Heading size for the typography lockup (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 4;\n\n  /**\n   * Layout orientation\n   * - 'vertical': Icon above text (default, used in grid layouts)\n   * - 'horizontal': Icon beside text (used in compact layouts)\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Size of the icon box\n   */\n  @Prop() iconSize: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-text': true,\n      [`icon-text--${this.orientation}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon-box \n            icon={this.icon} \n            size={this.iconSize}\n            class=\"icon-text__icon\"\n          ></af-icon-box>\n          \n          <af-typography-lockup\n            headingSize={this.headingSize}\n            textAlignment=\"left\"\n            buttonAlignment=\"vertical\"\n            class=\"icon-text__lockup\"\n          >\n            <slot></slot>\n            <span slot=\"description\">\n              <slot name=\"description\"></slot>\n            </span>\n            <span slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </span>\n          </af-typography-lockup>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,yeAAye;;MC+Blf,UAAU,GAAA,MAAA;AANvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkC,SAAS;AAmC5D;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,CAAC,cAAc,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;SACzC;AAED,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,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,iBAAiB,EACV,CAAA,EAEf,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,mBAAmB,EAAA,EAEzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC3B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACvB,CACc,CACnB,CACD;;;;;;;"}

package/dist/affinda/af-illustrated-card.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-illustrated-card.entry.esm.js","sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  /* Override card atom defaults - illustrated card handles its own spacing */\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* ==========================================================================\n   Base Illustrated Card Styles\n   ========================================================================== */\n\n.illustrated-card {\n  min-height: 400px;\n}\n\n/* ==========================================================================\n   Content Area\n   ========================================================================== */\n\n.illustrated-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Desktop default size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n  padding: 40px 32px 12px 32px;\n}\n\n/* Desktop large size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* Mobile spacing */\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n  padding: 32px 24px 12px 24px;\n}\n\n/* ==========================================================================\n   Illustration Area\n   ========================================================================== */\n\n.illustrated-card__illustration-area {\n  position: relative;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  box-sizing: border-box;\n}\n\n/* Desktop illustration area height */\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n  min-height: 160px;\n}\n\n/* Mobile illustration area height */\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n  min-height: 192px;\n}\n\n/* Illustration placeholder for when using data attributes */\n.illustrated-card__illustration-placeholder {\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Illustration image styling */\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n  max-width: 100%;\n  max-height: 200px;\n  height: auto;\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n/* Pass theme colors to typography lockup */\n.illustrated-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary);\n  --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n * \n * Uses a theme background with text at top and an illustration from\n * @affinda/illustrations at the bottom.\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;MCoBn5D,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;AAqClD;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAAA,EAE1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACc,CACnB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;"}
+{"version":3,"file":"af-illustrated-card.entry.esm.js","sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  /* Override card atom defaults - illustrated card handles its own spacing */\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* ==========================================================================\n   Base Illustrated Card Styles\n   ========================================================================== */\n\n.illustrated-card {\n  min-height: 400px;\n}\n\n/* ==========================================================================\n   Content Area\n   ========================================================================== */\n\n.illustrated-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Desktop default size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n  padding: 40px 32px 12px 32px;\n}\n\n/* Desktop large size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* Mobile spacing */\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n  padding: 32px 24px 12px 24px;\n}\n\n/* ==========================================================================\n   Illustration Area\n   ========================================================================== */\n\n.illustrated-card__illustration-area {\n  position: relative;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  box-sizing: border-box;\n}\n\n/* Desktop illustration area height */\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n  min-height: 160px;\n}\n\n/* Mobile illustration area height */\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n  min-height: 192px;\n}\n\n/* Illustration placeholder for when using data attributes */\n.illustrated-card__illustration-placeholder {\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Illustration image styling */\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n  max-width: 100%;\n  max-height: 200px;\n  height: auto;\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n/* Pass theme colors to typography lockup */\n.illustrated-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary);\n  --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n *\n * Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n *\n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n *\n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonLayout=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n                <span slot=\"buttons\">\n                  <slot name=\"buttons\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;MCqBn5D,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;AAwClD;IAtCC,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"af-image.entry.esm.js","sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  border-radius: var(--radius-md, 12px);\n  overflow: hidden;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay */\n.image-border {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--radius-md, 12px);\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"image-container\">\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,uZAAuZ;;MCY7Z,OAAO,GAAA,MAAA;;;;IAWlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;"}
+{"version":3,"file":"af-image.entry.esm.js","sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Shape variants — matches Webflow's rounded-edge image treatments */\n.image-container--rounded {\n  border-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-left {\n  border-top-left-radius: var(--radius-md, 12px);\n  border-bottom-left-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-right {\n  border-top-right-radius: var(--radius-md, 12px);\n  border-bottom-right-radius: var(--radius-md, 12px);\n}\n\n.image-container--square {\n  border-radius: 0;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay — inherits the host's border radius via parent clip */\n.image-border {\n  position: absolute;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n  border-radius: inherit;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  /**\n   * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\n   * patterns where only one edge is rounded so the image bleeds into a\n   * neighbouring section.\n   * - `rounded` (default) — symmetric rounded corners on all four sides.\n   * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n   * - `rounded-right` — rounded only on the right edge.\n   * - `square` — no corner rounding.\n   */\n  @Prop() shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square' = 'rounded';\n\n  render() {\n    return (\n      <Host>\n        <div class={`image-container image-container--${this.shape}`}>\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,0vBAA0vB;;MCYhwB,OAAO,GAAA,MAAA;AANpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAA4D,SAAS;AAYnF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,iCAAA,EAAoC,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;"}

package/dist/affinda/af-in-page-banner.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-in-page-banner.entry.esm.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Banner Container\n   \n   Design specs from Figma:\n   - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n   - Border radius: 32px (desktop), 24px (mobile)\n   - Content padding vertical: 48px (margins/margin TB tight)\n   ========================================================================== */\n\n.banner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  padding-left: 40px;\n  padding-right: 148px;\n  padding-top: 0;\n  padding-bottom: 0;\n  border-radius: var(--radii-card-level-1, 32px);\n  overflow: hidden;\n  max-width: 1280px;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Theme Variants - Background Colors\n   \n   Colors from Figma:\n   - mist-green: #c6d5d1 (background/base)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - soft-clay: #c0ab8d (softclay-400)\n   - white-ivory: #fff9ee (background/ivory-paper)\n   ========================================================================== */\n\n.banner.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-400, #2b484f);\n  \n  /* Buttons - ice primary, inkwell secondary */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n  --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n  \n  /* Buttons - ice primary, white secondary */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-450, #203e45);\n  \n  /* Buttons */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-400, #2b484f);\n  \n  /* Buttons */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   Decorative Wave Overlay\n   \n   Figma specs:\n   - Position: bottom -17.41px, right -156px\n   - Size: 521px x 323px\n   - Fill colors per theme\n   ========================================================================== */\n\n.banner__wave-overlay {\n  position: absolute;\n  bottom: -17px;\n  right: -156px;\n  width: 521px;\n  height: 323px;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.banner__wave-svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Theme-specific Wave Colors\n   The SVG uses currentColor, so we set color on the overlay container.\n   ========================================================================== */\n\n.banner.theme-mist-green .banner__wave-overlay {\n  color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n  color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n  color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n  color: rgba(20, 52, 59, 0.04);\n}\n\n/* ==========================================================================\n   Illustration Area\n   \n   Figma specs:\n   - Desktop: max 360px x 360px, aspect ratio preserved\n   - Mobile: 212px x 212px, positioned absolute top-right\n   ========================================================================== */\n\n.banner__illustration {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 360px;\n  height: 360px;\n  max-width: 360px;\n  max-height: 360px;\n  aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* Allow slotted content to fill the illustration area */\n.banner__illustration ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Content Area (Typography Lockup)\n   \n   Figma specs:\n   - Vertical padding: 48px (margins/margin TB tight)\n   - Gap between copy and buttons: 40px\n   - Gap between heading and description: 16px\n   - Max-width for copy: 840px\n   ========================================================================== */\n\n.banner__content {\n  position: relative;\n  z-index: 1;\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 40px;\n  padding-top: var(--margins-margin-tb-tight, 48px);\n  padding-bottom: var(--margins-margin-tb-tight, 48px);\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.banner__copy {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 840px;\n  width: 100%;\n  white-space: pre-wrap;\n}\n\n/* ==========================================================================\n   Heading\n   \n   Figma specs:\n   - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n   - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n   - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n   ========================================================================== */\n\n.banner__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--typography-headingweight, 500);\n  font-size: 44px;\n  line-height: 1;\n  letter-spacing: -0.88px;\n  color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n  margin: 0;\n  white-space: pre-wrap;\n}\n\n/* ==========================================================================\n   Description\n   \n   Figma specs:\n   - Font size: 18px\n   - Line height: 26px\n   - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n   - Color: typography/body-default #2b484f (or theme variant)\n   ========================================================================== */\n\n.banner__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--typography-bodyweight, 400);\n  font-size: 18px;\n  line-height: 26px;\n  color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n  margin: 0;\n  white-space: pre-wrap;\n}\n\n/* ==========================================================================\n   Button Group\n   \n   Figma specs:\n   - Desktop: horizontal, gap 12px\n   - Mobile: vertical, full-width buttons, gap 12px\n   - Button padding: 24px horizontal, 12px vertical\n   - Button border-radius: 9999px (radii/button)\n   ========================================================================== */\n\n.banner__buttons {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n  align-items: flex-start;\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (≤768px)\n   \n   Figma mobile specs:\n   - Width: 100%\n   - Border radius: 24px\n   - Padding top: 224px (space for illustration)\n   - Content padding: pb 48px, pt 16px, px 28px\n   - Content min-height: 320px\n   - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .banner {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 224px 0 0 0;\n    border-radius: var(--radii-card-level-1-mobile, 24px);\n    max-width: 100%;\n    min-height: auto;\n  }\n\n  /* Wave overlay hidden on mobile */\n  .banner__wave-overlay {\n    display: none;\n  }\n\n  /* Illustration positioned at top-right on mobile */\n  .banner__illustration {\n    position: absolute;\n    top: 12px;\n    left: auto;\n    right: 0;\n    transform: none;\n    width: 212px;\n    height: 212px;\n    max-width: 280px;\n    max-height: 280px;\n  }\n\n  /* Content takes full width with min-height */\n  .banner__content {\n    width: 100%;\n    min-height: 320px;\n    padding: 16px 28px 48px 28px;\n    gap: 40px;\n    flex: none;\n  }\n\n  /* Ensure copy section doesn't constrain width on mobile */\n  .banner__copy {\n    max-width: 100%;\n  }\n\n  /* Mobile heading size */\n  .banner__heading {\n    font-size: 32px;\n    letter-spacing: -0.64px;\n  }\n\n  /* Buttons stack vertically on mobile, full width */\n  .banner__buttons {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    width: 100%;\n  }\n\n  /* Ensure af-button takes full width on mobile */\n  .banner__buttons {\n    --af-button-width: 100%;\n  }\n\n  .banner__buttons af-button {\n    display: block;\n    width: 100%;\n  }\n}\n\n/* ==========================================================================\n   Small Mobile (≤480px)\n   ========================================================================== */\n\n@media (max-width: 480px) {\n  .banner {\n    padding-top: 200px;\n  }\n\n  .banner__illustration {\n    /* Keep right-aligned, just adjust size */\n    right: 0;\n    width: 180px;\n    height: 180px;\n  }\n\n  .banner__content {\n    padding: 16px 20px 36px 20px;\n    min-height: 280px;\n  }\n\n  .banner__heading {\n    font-size: 28px;\n    letter-spacing: -0.56px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n *   theme=\"inkwell\"\n *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n *   ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n */\n@Component({\n  tag: 'af-in-page-banner',\n  styleUrl: 'af-in-page-banner.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfInPageBanner {\n  /** Theme - sets the banner background color and typography colors */\n  @Prop() theme: BannerTheme = 'mist-green';\n\n  /** Banner heading */\n  @Prop() heading: string = '';\n\n  /** Banner description */\n  @Prop() description: string = '';\n\n  /** Primary button text */\n  @Prop() primaryButtonText: string = '';\n\n  /** Primary button URL */\n  @Prop() primaryButtonUrl: string = '#';\n\n  /** Secondary button text (optional - if empty, button won't show) */\n  @Prop() secondaryButtonText: string = '';\n\n  /** Secondary button URL */\n  @Prop() secondaryButtonUrl: string = '#';\n\n  /** \n   * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n   * from @affinda/illustrations in your app code.\n   */\n  @Prop() illustrationUrl: string = '';\n\n  /** Whether to show the decorative wave overlay */\n  @Prop() showWaveDecoration: boolean = true;\n\n  /**\n   * Renders the decorative wave SVG overlay.\n   * Uses the Affinda brand \"infinity loop\" wave pattern.\n   * Fill color is controlled via CSS custom properties per theme.\n   */\n  private renderWaveOverlay() {\n    return (\n      <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n        <svg \n          viewBox=\"0 0 521 323\" \n          fill=\"none\" \n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"banner__wave-svg\"\n        >\n          <path \n            d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n            fill=\"currentColor\"\n          />\n        </svg>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`banner theme-${this.theme}`}>\n          {/* Decorative wave overlay */}\n          {this.showWaveDecoration && this.renderWaveOverlay()}\n\n          {/* Illustration area */}\n          <div class=\"banner__illustration\">\n            {this.illustrationUrl ? (\n              <img \n                src={this.illustrationUrl} \n                alt=\"\" \n                class=\"banner__illustration-img\" \n                loading=\"lazy\"\n              />\n            ) : (\n              <slot name=\"illustration\"></slot>\n            )}\n          </div>\n\n          {/* Content area with typography lockup */}\n          <div class=\"banner__content\">\n            <div class=\"banner__copy\">\n              {this.heading && (\n                <h2 class=\"banner__heading\">{this.heading}</h2>\n              )}\n              {this.description && (\n                <p class=\"banner__description\">{this.description}</p>\n              )}\n            </div>\n\n            {/* Button group */}\n            {(this.primaryButtonText || this.secondaryButtonText) && (\n              <div class=\"banner__buttons\">\n                {this.primaryButtonText && (\n                  <af-button \n                    href={this.primaryButtonUrl}\n                    variant=\"primary\"\n                  >\n                    {this.primaryButtonText}\n                  </af-button>\n                )}\n                {this.secondaryButtonText && (\n                  <af-button \n                    href={this.secondaryButtonUrl}\n                    variant=\"secondary\"\n                  >\n                    {this.secondaryButtonText}\n                  </af-button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"af-in-page-banner.entry.esm.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Banner Container\n   \n   Design specs from Figma:\n   - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n   - Border radius: 32px (desktop), 24px (mobile)\n   - Content padding vertical: 48px (margins/margin TB tight)\n   ========================================================================== */\n\n.banner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  padding-left: 40px;\n  padding-right: 148px;\n  padding-top: 0;\n  padding-bottom: 0;\n  border-radius: var(--radii-card-level-1, 32px);\n  overflow: hidden;\n  max-width: 1280px;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Theme Variants - Background Colors\n   \n   Colors from Figma:\n   - mist-green: #c6d5d1 (background/base)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - soft-clay: #c0ab8d (softclay-400)\n   - white-ivory: #fff9ee (background/ivory-paper)\n   ========================================================================== */\n\n.banner.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-400, #2b484f);\n  \n  /* Buttons - ice primary, inkwell secondary */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n  --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n  \n  /* Buttons - ice primary, white secondary */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-450, #203e45);\n  \n  /* Buttons */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-400, #2b484f);\n  \n  /* Buttons */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   Decorative Wave Overlay\n   \n   Figma specs:\n   - Position: bottom -17.41px, right -156px\n   - Size: 521px x 323px\n   - Fill colors per theme\n   ========================================================================== */\n\n.banner__wave-overlay {\n  position: absolute;\n  bottom: -17px;\n  right: -156px;\n  width: 521px;\n  height: 323px;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.banner__wave-svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Theme-specific Wave Colors\n   The SVG uses currentColor, so we set color on the overlay container.\n   ========================================================================== */\n\n.banner.theme-mist-green .banner__wave-overlay {\n  color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n  color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n  color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n  color: rgba(20, 52, 59, 0.04);\n}\n\n/* ==========================================================================\n   Illustration Area\n   \n   Figma specs:\n   - Desktop: max 360px x 360px, aspect ratio preserved\n   - Mobile: 212px x 212px, positioned absolute top-right\n   ========================================================================== */\n\n.banner__illustration {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 360px;\n  height: 360px;\n  max-width: 360px;\n  max-height: 360px;\n  aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* Allow slotted content to fill the illustration area */\n.banner__illustration ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Content Area (Typography Lockup)\n   \n   Figma specs:\n   - Vertical padding: 48px (margins/margin TB tight)\n   - Gap between copy and buttons: 40px\n   - Gap between heading and description: 16px\n   - Max-width for copy: 840px\n   ========================================================================== */\n\n.banner__content {\n  position: relative;\n  z-index: 1;\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 40px;\n  padding-top: var(--margins-margin-tb-tight, 48px);\n  padding-bottom: var(--margins-margin-tb-tight, 48px);\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.banner__copy {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 840px;\n  width: 100%;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Heading\n   \n   Figma specs:\n   - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n   - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n   - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n   ========================================================================== */\n\n.banner__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--typography-headingweight, 500);\n  font-size: 44px;\n  line-height: 1;\n  letter-spacing: -0.88px;\n  color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n  margin: 0;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Description\n   \n   Figma specs:\n   - Font size: 18px\n   - Line height: 26px\n   - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n   - Color: typography/body-default #2b484f (or theme variant)\n   ========================================================================== */\n\n.banner__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--typography-bodyweight, 400);\n  font-size: 18px;\n  line-height: 26px;\n  color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n  margin: 0;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Button Group\n   \n   Figma specs:\n   - Desktop: horizontal, gap 12px\n   - Mobile: vertical, full-width buttons, gap 12px\n   - Button padding: 24px horizontal, 12px vertical\n   - Button border-radius: 9999px (radii/button)\n   ========================================================================== */\n\n.banner__buttons {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n  align-items: flex-start;\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (≤768px)\n   \n   Figma mobile specs:\n   - Width: 100%\n   - Border radius: 24px\n   - Padding top: 224px (space for illustration)\n   - Content padding: pb 48px, pt 16px, px 28px\n   - Content min-height: 320px\n   - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .banner {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 224px 0 0 0;\n    border-radius: var(--radii-card-level-1-mobile, 24px);\n    max-width: 100%;\n    min-height: auto;\n  }\n\n  /* Wave overlay hidden on mobile */\n  .banner__wave-overlay {\n    display: none;\n  }\n\n  /* Illustration positioned at top-right on mobile */\n  .banner__illustration {\n    position: absolute;\n    top: 12px;\n    left: auto;\n    right: 0;\n    transform: none;\n    width: 212px;\n    height: 212px;\n    max-width: 280px;\n    max-height: 280px;\n  }\n\n  /* Content takes full width with min-height */\n  .banner__content {\n    width: 100%;\n    min-height: 320px;\n    padding: 16px 28px 48px 28px;\n    gap: 40px;\n    flex: none;\n  }\n\n  /* Ensure copy section doesn't constrain width on mobile */\n  .banner__copy {\n    max-width: 100%;\n  }\n\n  /* Mobile heading size */\n  .banner__heading {\n    font-size: 32px;\n    letter-spacing: -0.64px;\n  }\n\n  /* Buttons stack vertically on mobile, full width */\n  .banner__buttons {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    width: 100%;\n  }\n\n  /* Ensure af-button takes full width on mobile */\n  .banner__buttons {\n    --af-button-width: 100%;\n  }\n\n  .banner__buttons af-button {\n    display: block;\n    width: 100%;\n  }\n}\n\n/* ==========================================================================\n   Small Mobile (≤480px)\n   ========================================================================== */\n\n@media (max-width: 480px) {\n  .banner {\n    padding-top: 200px;\n  }\n\n  .banner__illustration {\n    /* Keep right-aligned, just adjust size */\n    right: 0;\n    width: 180px;\n    height: 180px;\n  }\n\n  .banner__content {\n    padding: 16px 20px 36px 20px;\n    min-height: 280px;\n  }\n\n  .banner__heading {\n    font-size: 28px;\n    letter-spacing: -0.56px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n *   theme=\"inkwell\"\n *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n *   ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n *\n * **Slot-based composition (preferred for rich content):**\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n *   props; use when you need ghost variants, more than two buttons, or\n *   per-button icons).\n * - `illustration` — custom illustration markup.\n *\n * The string props remain supported for simple cases.\n */\n@Component({\n  tag: 'af-in-page-banner',\n  styleUrl: 'af-in-page-banner.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfInPageBanner {\n  /** Theme - sets the banner background color and typography colors */\n  @Prop() theme: BannerTheme = 'mist-green';\n\n  /** Banner heading */\n  @Prop() heading: string = '';\n\n  /** Banner description */\n  @Prop() description: string = '';\n\n  /** Primary button text */\n  @Prop() primaryButtonText: string = '';\n\n  /** Primary button URL */\n  @Prop() primaryButtonUrl: string = '#';\n\n  /** Secondary button text (optional - if empty, button won't show) */\n  @Prop() secondaryButtonText: string = '';\n\n  /** Secondary button URL */\n  @Prop() secondaryButtonUrl: string = '#';\n\n  /** \n   * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n   * from @affinda/illustrations in your app code.\n   */\n  @Prop() illustrationUrl: string = '';\n\n  /** Whether to show the decorative wave overlay */\n  @Prop() showWaveDecoration: boolean = true;\n\n  /**\n   * Renders the decorative wave SVG overlay.\n   * Uses the Affinda brand \"infinity loop\" wave pattern.\n   * Fill color is controlled via CSS custom properties per theme.\n   */\n  private renderWaveOverlay() {\n    return (\n      <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n        <svg \n          viewBox=\"0 0 521 323\" \n          fill=\"none\" \n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"banner__wave-svg\"\n        >\n          <path \n            d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n            fill=\"currentColor\"\n          />\n        </svg>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`banner theme-${this.theme}`}>\n          {/* Decorative wave overlay */}\n          {this.showWaveDecoration && this.renderWaveOverlay()}\n\n          {/* Illustration area */}\n          <div class=\"banner__illustration\">\n            {this.illustrationUrl ? (\n              <img \n                src={this.illustrationUrl} \n                alt=\"\" \n                class=\"banner__illustration-img\" \n                loading=\"lazy\"\n              />\n            ) : (\n              <slot name=\"illustration\"></slot>\n            )}\n          </div>\n\n          {/* Content area — slots take precedence over string props. */}\n          <div class=\"banner__content\">\n            <div class=\"banner__copy\">\n              <h2 class=\"banner__heading\">\n                <slot name=\"heading\">{this.heading}</slot>\n              </h2>\n              <div class=\"banner__description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            </div>\n\n            <div class=\"banner__buttons\">\n              <slot name=\"buttons\">\n                {this.primaryButtonText && (\n                  <af-button href={this.primaryButtonUrl} variant=\"primary\">\n                    {this.primaryButtonText}\n                  </af-button>\n                )}\n                {this.secondaryButtonText && (\n                  <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n                    {this.secondaryButtonText}\n                  </af-button>\n                )}\n              </slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

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

package/dist/affinda/af-stepper-step.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-stepper-step.entry.esm.js","sources":["src/components/af-stepper-step/af-stepper-step.css?tag=af-stepper-step&encapsulation=scoped","src/components/af-stepper-step/af-stepper-step.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 16px;\n  position: relative;\n  z-index: 1;\n}\n\n.stepper-step__badge {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n  background: var(--colour-background-white, #ffffff);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  font-size: 20px;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin-bottom: 24px;\n  flex-shrink: 0;\n}\n\n.stepper-step__content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 320px;\n}\n\n.stepper-step__heading {\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 24px;\n  line-height: 1.2;\n  letter-spacing: -0.02em;\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n}\n\n.stepper-step__body {\n  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n  font-size: 16px;\n  line-height: 1.5;\n  color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Normalize slotted heading/body tags */\n:host :where(h1, h2, h3, h4, h5, h6),\n:host :where(p) {\n  font: inherit;\n  color: inherit;\n  margin: 0;\n}\n\n/* Vertical orientation — align left */\n:host-context(.stepper--vertical) {\n  flex-direction: row;\n  align-items: flex-start;\n  text-align: left;\n  gap: 24px;\n  padding: 0;\n}\n\n:host-context(.stepper--vertical) .stepper-step__badge {\n  margin-bottom: 0;\n}\n\n@media (max-width: 767px) {\n  :host {\n    flex-direction: row;\n    align-items: flex-start;\n    text-align: left;\n    gap: 24px;\n    padding: 0;\n  }\n  .stepper-step__badge {\n    margin-bottom: 0;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single step within an af-stepper. Renders a numbered circular badge\n * followed by slotted heading + body content.\n *\n * The parent af-stepper auto-assigns the `index` attribute based on DOM\n * order, so consumers don't need to hand-number the steps.\n *\n * @slot heading - Step title (h3/h4 recommended).\n * @slot body - Step description paragraph(s).\n */\n@Component({\n  tag: 'af-stepper-step',\n  styleUrl: 'af-stepper-step.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfStepperStep {\n  /**\n   * Step number shown in the badge. Auto-assigned by the parent stepper if\n   * not explicitly set.\n   */\n  @Prop({ reflect: true }) index: number = 1;\n\n  render() {\n    return (\n      <Host>\n        <span class=\"stepper-step__badge\">{this.index}</span>\n        <div class=\"stepper-step__content\">\n          <div class=\"stepper-step__heading\">\n            <slot name=\"heading\"></slot>\n          </div>\n          <div class=\"stepper-step__body\">\n            <slot name=\"body\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,u4DAAu4D;;MCkBn5D,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAiB3C;IAfC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACrD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,CACF,CACD;;;;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-stepper.entry.esm.js","sources":["src/components/af-stepper/af-stepper.css?tag=af-stepper&encapsulation=scoped","src/components/af-stepper/af-stepper.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n  position: relative;\n  max-width: 1120px;\n  margin: 0 auto;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 24px;\n}\n\n:host(.stepper--vertical) {\n  flex-direction: column;\n  max-width: 680px;\n  gap: 40px;\n}\n\n/* Horizontal connector — thin line running across the row of badges. */\n.stepper--horizontal .stepper__connector {\n  position: absolute;\n  top: 23px; /* aligned to badge centre (badge height 48px / 2 = 24, minus 1px for line) */\n  left: 8%;\n  right: 8%;\n  height: 2px;\n  background: var(--colour-brand-inkwell, #14343b);\n  opacity: 0.25;\n  z-index: 0;\n}\n\n.stepper--vertical .stepper__connector {\n  position: absolute;\n  top: 24px;\n  bottom: 24px;\n  left: 23px;\n  width: 2px;\n  background: var(--colour-brand-inkwell, #14343b);\n  opacity: 0.25;\n  z-index: 0;\n}\n\n@media (max-width: 767px) {\n  .stepper--horizontal {\n    flex-direction: column;\n    gap: 32px;\n  }\n  .stepper--horizontal .stepper__connector {\n    top: 24px;\n    bottom: 24px;\n    left: 23px;\n    right: auto;\n    width: 2px;\n    height: auto;\n  }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Stepper composite for \"Sign up / Upload / See results\"-style marketing\n * flows. Renders children `af-stepper-step` elements in a horizontal row\n * (desktop) or vertical stack (mobile), with a connector line between badges.\n *\n * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine\n * connector, and centered step text.\n *\n * @example\n * ```html\n * <af-stepper>\n *   <af-stepper-step>\n *     <h3 slot=\"heading\">Sign up for free</h3>\n *     <p slot=\"body\">No sales calls, no credit cards.</p>\n *   </af-stepper-step>\n *   <af-stepper-step>...</af-stepper-step>\n *   <af-stepper-step>...</af-stepper-step>\n * </af-stepper>\n * ```\n *\n * @slot - `af-stepper-step` elements.\n */\n@Component({\n  tag: 'af-stepper',\n  styleUrl: 'af-stepper.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfStepper {\n  @Element() el!: HTMLElement;\n\n  /** Layout orientation. Horizontal on desktop, auto-stacks on mobile. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.assignIndices();\n  }\n\n  private assignIndices() {\n    const steps = Array.from(this.el.querySelectorAll('af-stepper-step')) as any[];\n    steps.forEach((step, i) => {\n      // Set via property so Stencil reactively re-renders the badge.\n      // Only overwrite when the consumer hasn't explicitly set one.\n      if (step.index == null || step.index === 1) {\n        step.index = i + 1;\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host class={`stepper stepper--${this.orientation}`}>\n        <div class=\"stepper__connector\" aria-hidden=\"true\"></div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,s1BAAs1B;;MC8B91B,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAW,CAAA,WAAA,GAA8B,YAAY;AAyB9D;IAvBC,gBAAgB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;;IAGd,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAU;QAC9E,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;;;AAGxB,YAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;AAC1C,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;;AAEtB,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,WAAW,CAAE,CAAA,EAAA,EACjD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,EACzD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}