@affinda/wc 0.0.17 → 0.0.18

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

@@ -0,0 +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;;;;;;;;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-accordion.entry.esm.js","sources":["src/components/af-accordion/af-accordion.css?tag=af-accordion&encapsulation=scoped","src/components/af-accordion/af-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.accordion {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Ensure proper stacking for accordion items */\n::slotted(af-accordion-item) {\n  display: block;\n}\n\n/* Remove bottom border from last item */\n::slotted(af-accordion-item:last-child) {\n  --accordion-item-border: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Listen } from '@stencil/core';\n\n/**\n * Accordion container that manages multiple accordion items.\n * Controls which items are open based on mode (independent or exclusive).\n * \n * @slot - Place af-accordion-item components here\n */\n@Component({\n  tag: 'af-accordion',\n  styleUrl: 'af-accordion.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfAccordion {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Behavior mode for the accordion.\n   * - `independent`: Multiple items can be open simultaneously\n   * - `exclusive`: Only one item can be open at a time\n   */\n  @Prop() mode: 'independent' | 'exclusive' = 'independent';\n\n  /**\n   * Currently open item(s) for controlled mode.\n   * In independent mode, can be an array of item IDs.\n   * In exclusive mode, should be a single item ID or null.\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Default open item(s) for uncontrolled mode.\n   * Used as initial state when value prop is not provided.\n   */\n  @Prop() defaultValue?: string | string[];\n\n  /**\n   * Emitted when the open state of items changes.\n   * Returns the new value (string[] for independent, string | null for exclusive).\n   */\n  @Event({ eventName: 'af-accordion-change' }) accordionChange!: EventEmitter<{ value: string | string[] | null }>;\n\n  @State() internalValue: string[] = [];\n\n  private isControlled(): boolean {\n    return this.value !== undefined;\n  }\n\n  componentWillLoad() {\n    // Initialize internal value from defaultValue or value\n    const initialValue = this.isControlled() ? this.value : this.defaultValue;\n    this.internalValue = this.normalizeValue(initialValue);\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string | string[] | undefined) {\n    if (this.isControlled()) {\n      this.internalValue = this.normalizeValue(newValue);\n      this.syncItems();\n    }\n  }\n\n  componentDidLoad() {\n    this.syncItems();\n  }\n\n  /**\n   * Listen for toggle events from child accordion items\n   */\n  @Listen('af-accordion-toggle')\n  handleItemToggle(event: CustomEvent<{ itemId: string; open: boolean }>) {\n    event.stopPropagation();\n    const { itemId, open } = event.detail;\n\n    let newValue: string[];\n\n    if (this.mode === 'exclusive') {\n      // In exclusive mode, only one item can be open\n      newValue = open ? [itemId] : [];\n    } else {\n      // In independent mode, toggle the item\n      if (open) {\n        newValue = [...this.internalValue, itemId];\n      } else {\n        newValue = this.internalValue.filter(id => id !== itemId);\n      }\n    }\n\n    if (!this.isControlled()) {\n      this.internalValue = newValue;\n      this.syncItems();\n    }\n\n    // Emit change event\n    const emitValue = this.mode === 'exclusive' \n      ? (newValue.length > 0 ? newValue[0] : null)\n      : newValue;\n    this.accordionChange.emit({ value: emitValue });\n  }\n\n  /**\n   * Normalize value prop to array format for internal use\n   */\n  private normalizeValue(value: string | string[] | undefined): string[] {\n    if (value === undefined || value === null) {\n      return [];\n    }\n    if (Array.isArray(value)) {\n      // In exclusive mode, only keep the first item\n      return this.mode === 'exclusive' ? value.slice(0, 1) : value;\n    }\n    return [value];\n  }\n\n  /**\n   * Sync the open state of all child accordion items\n   */\n  private syncItems() {\n    const items = this.el.querySelectorAll('af-accordion-item');\n    items.forEach((element) => {\n      const item = element as HTMLElement & { itemId?: string; open?: boolean };\n      if (item.itemId) {\n        item.open = this.internalValue.includes(item.itemId);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host class={{ [`mode-${this.mode}`]: true }}>\n        <div class=\"accordion\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\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-hero-section, 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=\"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;;;;;;;"}

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\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,o7EAAo7E;;MCez7E,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-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;;;;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-center.entry.esm.js","sources":["src/components/af-center/af-center.css?tag=af-center&encapsulation=shadow","src/components/af-center/af-center.tsx"],"sourcesContent":[":host {\n  display: flex;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Axis = 'horizontal' | 'vertical' | 'both';\n\n/**\n * Center layout component for quickly centering content.\n * Supports horizontal, vertical, or both axes.\n *\n * @slot - Content to center\n */\n@Component({\n  tag: 'af-center',\n  styleUrl: 'af-center.css',\n  shadow: true,\n})\nexport class AfCenter {\n  /**\n   * Which axis to center on.\n   * - 'horizontal': Center horizontally (justify-content: center)\n   * - 'vertical': Center vertically (align-items: center)\n   * - 'both': Center on both axes\n   */\n  @Prop() axis: Axis = 'both';\n\n  /**\n   * Use inline-flex instead of flex.\n   * Useful when the center container should only take up as much space as needed.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Set a minimum height. Useful for vertical centering in a viewport.\n   * Accepts any valid CSS value (e.g., '100vh', '400px').\n   */\n  @Prop() minHeight?: string;\n\n  render() {\n    const style: Record<string, string> = {\n      display: this.inline ? 'inline-flex' : 'flex',\n    };\n\n    if (this.axis === 'horizontal' || this.axis === 'both') {\n      style.justifyContent = 'center';\n    }\n\n    if (this.axis === 'vertical' || this.axis === 'both') {\n      style.alignItems = 'center';\n    }\n\n    if (this.minHeight) {\n      style.minHeight = this.minHeight;\n    }\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,wEAAwE;;MCe/E,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAS,MAAM;AAE3B;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AA+BhC;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAA2B;YACpC,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,MAAM;SAC9C;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACtD,YAAA,KAAK,CAAC,cAAc,GAAG,QAAQ;;AAGjC,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACpD,YAAA,KAAK,CAAC,UAAU,GAAG,QAAQ;;AAG7B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;;QAGlC,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"af-checkbox.entry.esm.js","sources":["src/components/af-checkbox/af-checkbox.css?tag=af-checkbox&encapsulation=shadow","src/components/af-checkbox/af-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.checkbox.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Custom checkbox control */\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-checkbox, 4px);\n  border: 1px solid var(--forms-control-stroke, #d0d6d8);\n  background: var(--forms-control-bg-default, #ffffff);\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked/indeterminate state */\n.control.checked {\n  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n  border-color: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n  border-color: var(--forms-control-stroke-disabled, #d0d6d8);\n}\n\n.control.checked.disabled {\n  background: var(--forms-control-bg-active-disabled, #708380);\n  border-color: var(--forms-control-bg-active-disabled, #708380);\n}\n\n/* Hover state */\n.checkbox:not(.disabled):hover .control {\n  border-color: var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n  outline: none;\n}\n\n/* Icon styling */\n.icon {\n  width: 16px;\n  height: 16px;\n  color: #ffffff;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Checkbox component for selecting multiple options.\n * Supports checked, unchecked, and indeterminate states.\n * \n * @slot - Checkbox label text\n */\n@Component({\n  tag: 'af-checkbox',\n  styleUrl: 'af-checkbox.css',\n  shadow: true\n})\nexport class AfCheckbox {\n  /**\n   * Whether the checkbox is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Whether the checkbox is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the checkbox for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the checkbox for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the checkbox checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean }>;\n\n  private inputEl?: HTMLInputElement;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.afChange.emit({ checked: this.checked });\n  };\n\n  componentDidLoad() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  render() {\n    const checkboxClasses = {\n      'checkbox': true,\n      'checked': this.checked,\n      'indeterminate': this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked || this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={checkboxClasses}>\n          <input\n            type=\"checkbox\"\n            class=\"input\"\n            ref={(el) => this.inputEl = el ?? undefined}\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && !this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M13.5 4L6 11.5L2.5 8\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\" \n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            )}\n            {this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M3 8H13\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"af-checkbox.entry.esm.js","sources":["src/components/af-checkbox/af-checkbox.css?tag=af-checkbox&encapsulation=shadow","src/components/af-checkbox/af-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.checkbox.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Custom checkbox control */\n.control {\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-checkbox, 4px);\n  /* Use inset box-shadow instead of border to prevent layout shift */\n  border: none;\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked/indeterminate state */\n.control.checked {\n  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n  box-shadow: none;\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n  background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n  box-shadow: none;\n}\n\n/* Hover state */\n.checkbox:not(.disabled):hover .control:not(.checked) {\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  outline: none;\n  box-shadow: \n    inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n.input:focus-visible + .control.checked {\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Icon styling - absolutely positioned to prevent layout shift */\n.icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 16px;\n  height: 16px;\n  color: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Checkbox component for selecting multiple options.\n * Supports checked, unchecked, and indeterminate states.\n * \n * @slot - Checkbox label text\n */\n@Component({\n  tag: 'af-checkbox',\n  styleUrl: 'af-checkbox.css',\n  shadow: true\n})\nexport class AfCheckbox {\n  /**\n   * Whether the checkbox is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Whether the checkbox is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the checkbox for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the checkbox for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the checkbox checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean }>;\n\n  private inputEl?: HTMLInputElement;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.afChange.emit({ checked: this.checked });\n  };\n\n  componentDidLoad() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  render() {\n    const checkboxClasses = {\n      'checkbox': true,\n      'checked': this.checked,\n      'indeterminate': this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked || this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={checkboxClasses}>\n          <input\n            type=\"checkbox\"\n            class=\"input\"\n            ref={(el) => this.inputEl = el ?? undefined}\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && !this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M13.5 4L6 11.5L2.5 8\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\" \n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            )}\n            {this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M3 8H13\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-divider.entry.esm.js","sources":["src/components/af-divider/af-divider.css?tag=af-divider&encapsulation=shadow","src/components/af-divider/af-divider.tsx"],"sourcesContent":[":host {\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(.divider--horizontal) {\n  display: block;\n  width: 100%;\n  height: 1px;\n  background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n}\n\n:host(.divider--vertical) {\n  display: inline-block;\n  width: 1px;\n  height: 100%;\n  min-height: 1em;\n  background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n  align-self: stretch;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Orientation = 'horizontal' | 'vertical';\ntype Spacing = 'none' | '1' | '2' | '3' | '4' | '5' | '6' | '8';\n\n/**\n * Divider component for visual separation between content.\n * Supports horizontal and vertical orientations with theme-aware styling.\n */\n@Component({\n  tag: 'af-divider',\n  styleUrl: 'af-divider.css',\n  shadow: true,\n})\nexport class AfDivider {\n  /**\n   * Orientation of the divider.\n   */\n  @Prop() orientation: Orientation = 'horizontal';\n\n  /**\n   * Spacing (margin) around the divider using space tokens.\n   * For horizontal: margin-top and margin-bottom\n   * For vertical: margin-left and margin-right\n   */\n  @Prop() spacing: Spacing = '4';\n\n  render() {\n    const isVertical = this.orientation === 'vertical';\n    const spacingValue = this.spacing === 'none' ? '0' : `var(--space-${this.spacing})`;\n\n    const style: Record<string, string> = isVertical\n      ? {\n          marginLeft: spacingValue,\n          marginRight: spacingValue,\n        }\n      : {\n          marginTop: spacingValue,\n          marginBottom: spacingValue,\n        };\n\n    return (\n      <Host\n        class={{\n          'divider': true,\n          'divider--horizontal': !isVertical,\n          'divider--vertical': isVertical,\n        }}\n        style={style}\n        role=\"separator\"\n        aria-orientation={this.orientation}\n      ></Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,oWAAoW;;MCc5W,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAgB,YAAY;AAE/C;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,GAAG;AA6B/B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,KAAK,UAAU;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG,CAAA,YAAA,EAAe,IAAI,CAAC,OAAO,GAAG;QAEnF,MAAM,KAAK,GAA2B;AACpC,cAAE;AACE,gBAAA,UAAU,EAAE,YAAY;AACxB,gBAAA,WAAW,EAAE,YAAY;AAC1B;AACH,cAAE;AACE,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,YAAY,EAAE,YAAY;aAC3B;QAEL,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;gBACf,qBAAqB,EAAE,CAAC,UAAU;AAClC,gBAAA,mBAAmB,EAAE,UAAU;AAChC,aAAA,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,IAAI,CAAC,WAAW,EAAA,CAC5B;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"af-fieldset.entry.esm.js","sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.fieldset {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-inline-size: 0;\n}\n\n.fieldset.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n  display: block;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  color: var(--colour-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  padding: 0;\n  margin: 0 0 12px 0;\n  width: 100%;\n}\n\n/* Items container */\n.items {\n  display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 28px;\n  align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n  width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,g1BAAg1B;;MCaz1B,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACV,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;"}
+{"version":3,"file":"af-fieldset.entry.esm.js","sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.fieldset {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-inline-size: 0;\n}\n\n.fieldset.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n  display: block;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  padding: 0;\n  margin: 0 0 12px 0;\n  width: 100%;\n}\n\n/* Items container */\n.items {\n  display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 28px;\n  align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n  width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,40BAA40B;;MCar1B,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACV,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-grid.entry.esm.js","sources":["src/components/af-grid/af-grid.css?tag=af-grid&encapsulation=shadow","src/components/af-grid/af-grid.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-gap);\n  align-items: var(--grid-align);\n}\n\n/* Large breakpoint: 1024px and below */\n@media (max-width: 1024px) {\n  .grid {\n    grid-template-columns: repeat(var(--grid-columns-lg), 1fr);\n  }\n}\n\n/* Medium breakpoint: 768px and below */\n@media (max-width: 768px) {\n  .grid {\n    grid-template-columns: repeat(var(--grid-columns-md), 1fr);\n  }\n}\n\n/* Small breakpoint: 375px and below */\n@media (max-width: 375px) {\n  .grid {\n    grid-template-columns: repeat(var(--grid-columns-sm), 1fr);\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\ntype Columns = 1 | 2 | 3 | 4 | 5 | 6 | 12;\ntype Align = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * Generic CSS Grid component for flexible column layouts.\n * Supports responsive column counts at different breakpoints.\n *\n * @slot - Grid items\n */\n@Component({\n  tag: 'af-grid',\n  styleUrl: 'af-grid.css',\n  shadow: true,\n})\nexport class AfGrid {\n  /**\n   * Number of columns at the default (largest) breakpoint.\n   */\n  @Prop() columns: Columns = 3;\n\n  /**\n   * Number of columns at the large breakpoint (1024px and below).\n   */\n  @Prop() columnsLg?: Columns;\n\n  /**\n   * Number of columns at the medium breakpoint (768px and below).\n   */\n  @Prop() columnsMd?: Columns;\n\n  /**\n   * Number of columns at the small breakpoint (375px and below).\n   */\n  @Prop() columnsSm?: Columns;\n\n  /**\n   * Gap between grid items using space tokens (1-8).\n   * Maps to --space-1 through --space-8 (4px to 32px).\n   */\n  @Prop() gap: Gap = '4';\n\n  /**\n   * Align items within their grid cells.\n   */\n  @Prop() align: Align = 'stretch';\n\n  render() {\n    const alignMap: Record<Align, string> = {\n      start: 'start',\n      center: 'center',\n      end: 'end',\n      stretch: 'stretch',\n    };\n\n    return (\n      <Host\n        style={{\n          '--grid-columns': String(this.columns),\n          '--grid-columns-lg': String(this.columnsLg ?? this.columns),\n          '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),\n          '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),\n          '--grid-gap': `var(--space-${this.gap})`,\n          '--grid-align': alignMap[this.align],\n        } as Record<string, string>}\n      >\n        <div class=\"grid\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,udAAud;;MCiB5d,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,CAAC;AAiB5B;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AA2BjC;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,OAAO,EAAE,SAAS;SACnB;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;gBACtC,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;AAC3D,gBAAA,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;AAC7E,gBAAA,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;AACpF,gBAAA,YAAY,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AACxC,gBAAA,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACX,aAAA,EAAA,EAE3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

package/dist/affinda/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.esm.js","sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx","src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx","src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=shadow","src/components/af-nav-item/af-nav-item.tsx","src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=shadow","src/components/af-navbar/af-navbar.tsx","src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.heading {\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n}\n\n/* Alignment */\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Heading XL */\n.level-xl {\n  font-size: var(--font-size-heading-xl-mobile, 50px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-xl {\n    font-size: var(--font-size-heading-xl-desktop, 80px);\n  }\n}\n\n/* Heading 1 */\n.level-1 {\n  font-size: var(--font-size-heading-1-mobile, 38px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-1 {\n    font-size: var(--font-size-heading-1-desktop, 56px);\n  }\n}\n\n/* Heading 2 */\n.level-2 {\n  font-size: var(--font-size-heading-2-mobile, 32px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-2 {\n    font-size: var(--font-size-heading-2-desktop, 44px);\n  }\n}\n\n/* Heading 3 */\n.level-3 {\n  font-size: var(--font-size-heading-3-mobile, 25px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-3 {\n    font-size: var(--font-size-heading-3-desktop, 34px);\n  }\n}\n\n/* Heading 4 */\n.level-4 {\n  font-size: var(--font-size-heading-4-mobile, 20px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-4 {\n    font-size: var(--font-size-heading-4-desktop, 24px);\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n\n/* Heading 5 */\n.level-5 {\n  font-size: var(--font-size-heading-5-mobile, 18px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-5 {\n    font-size: var(--font-size-heading-5-desktop, 20px);\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-hero-section, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.text {\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-bodyfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n  letter-spacing: var(--letter-spacing-body, 0);\n}\n\n/* Alignment */\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Body variants */\n.variant-xlarge {\n  font-size: var(--font-size-body-xlarge, 22px);\n  line-height: var(--line-height-body-xlarge, 28px);\n}\n\n.variant-large {\n  font-size: var(--font-size-body-large, 18px);\n  line-height: var(--line-height-body-large, 26px);\n}\n\n.variant-medium {\n  font-size: var(--font-size-body-medium, 16px);\n  line-height: var(--line-height-body-medium, 24px);\n}\n\n.variant-small {\n  font-size: var(--font-size-body-small, 14px);\n  line-height: var(--line-height-body-small, 20px);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Text/body component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-hero-section, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' = 'medium';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n}\n\n.nav-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n.nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n/* Primary hierarchy - bold main navigation */\n.hierarchy-primary {\n  padding: 12px;\n  justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  gap: 10px;\n}\n\n/* Primary variant 01 - darker */\n.hierarchy-primary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-book, 500);\n  line-height: 20px;\n  color: var(--colour-typography-nav-item-primary, #14343b);\n}\n\n/* Add transparent border to prevent layout shift on hover */\n.hierarchy-primary.variant-01 .label-container {\n  border-bottom: 1px solid transparent;\n}\n\n/* Primary variant 02 - lighter for light backgrounds */\n.hierarchy-primary.variant-02 {\n  font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 20px;\n  color: var(--colour-typography-nav-item-secondary, #2b484f);\n}\n\n/* Hover state for primary variant-01 - show underline */\n.hierarchy-primary.variant-01:hover .label-container {\n  border-bottom-color: currentColor;\n}\n\n/* Active state for primary variant-01 - thicker border */\n.hierarchy-primary.variant-01.active .label-container {\n  border-bottom: 2px solid var(--colour-background-border-active, #8a7049);\n  /* Adjust margin to prevent shift from 1px to 2px border */\n  margin-bottom: -1px;\n}\n\n/* Hover and active states for variant-02 (light backgrounds) - no border */\n.hierarchy-primary.variant-02:hover {\n  background-color: rgba(20, 52, 59, 0.04);\n  border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n  background-color: rgba(20, 52, 59, 0.08);\n  border-radius: 8px;\n}\n\n/* Secondary hierarchy - smaller sub-navigation */\n.hierarchy-secondary {\n  padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-height: 24px;\n  gap: 10px;\n}\n\n/* Secondary variant 01 - medium weight */\n.hierarchy-secondary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--colour-typography-body-dark, #14343b);\n}\n\n/* Secondary variant 02 - regular weight */\n.hierarchy-secondary.variant-02 {\n  font-family: var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: var(--colour-typography-body-default, #2b484f);\n}\n\n/* Hover state for secondary - underline text */\n.hierarchy-secondary:hover .label-container {\n  text-decoration: underline;\n}\n\n/* Focus states for accessibility */\n.nav-item:focus-within {\n  outline: 2px solid var(--colour-background-border-active, #8a7049);\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Remove default focus outline on link */\n.nav-link:focus {\n  outline: none;\n}\n\n.nav-link:focus-visible + .nav-item,\n:host(:focus-visible) .nav-item {\n  outline: 2px solid var(--colour-background-border-active, #8a7049);\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Mobile breakpoint styles - explicit via prop */\n.hierarchy-primary.breakpoint-mobile {\n  padding: 20px 12px;\n  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);\n  width: 100%;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.breakpoint-mobile .label-container {\n  flex: 1;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.variant-01.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n}\n\n.hierarchy-primary.variant-02.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n  color: var(--colour-typography-body-subtle, #60767b);\n}\n\n/* Mobile breakpoint for secondary hierarchy */\n.hierarchy-secondary.breakpoint-mobile {\n  padding: 2px 0;\n  height: 40px;\n}\n\n.hierarchy-secondary.breakpoint-mobile .label-container {\n  min-height: 24px;\n}\n\n/* Mobile removes the hover underline effect */\n.hierarchy-primary.breakpoint-mobile.variant-01 .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01:hover .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01.active .label-container {\n  border-bottom-color: transparent;\n  margin-bottom: 0;\n}\n\n/* Icon sizing and styling */\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n/* Icon color inheritance for primary hierarchy */\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--colour-typography-nav-item-primary, #14343b);\n}\n\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--colour-typography-nav-item-secondary, #2b484f);\n}\n\n/* Icon rotation on hover for desktop primary with dropdown indicator */\n.hierarchy-primary.variant-01.breakpoint-desktop:hover ::slotted([slot=\"icon-right\"]),\n.hierarchy-primary.variant-01.breakpoint-desktop.active ::slotted([slot=\"icon-right\"]) {\n  transform: rotate(180deg);\n}\n\n/* Icon rotation on active for mobile primary with dropdown indicator */\n.hierarchy-primary.breakpoint-mobile.active ::slotted([slot=\"icon-right\"]) {\n  transform: rotate(180deg);\n}\n\n/* Secondary hierarchy - smaller icons */\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon color inheritance for secondary hierarchy */\n.hierarchy-secondary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--colour-typography-body-dark, #14343b);\n}\n\n.hierarchy-secondary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--colour-typography-body-default, #2b484f);\n}\n\n/* Fallback media query for when breakpoint prop is not set */\n@media (max-width: 991px) {\n  :host([breakpoint=\"auto\"]) .hierarchy-primary,\n  :host(:not([breakpoint])) .hierarchy-primary {\n    padding: 20px 12px;\n    border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);\n    width: 100%;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary .label-container,\n  :host(:not([breakpoint])) .hierarchy-primary .label-container {\n    flex: 1;\n    justify-content: flex-start;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-01,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-01 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-02,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-02 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n    color: var(--colour-typography-body-subtle, #60767b);\n  }\n\n  /* Icon rotation on active for auto/responsive breakpoint */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n\n  /* Disable desktop hover rotation in mobile view */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]) {\n    transform: none;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: true\n})\nexport class AfNavItem {\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles\n   * - 'mobile': Mobile-specific styles (larger text, different spacing)\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'active': this.active\n    };\n\n    const content = (\n      <div class={classes}>\n        <slot name=\"icon-left\"></slot>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        <slot name=\"icon-right\"></slot>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n}\n\n/* Spacer element that sits in normal document flow to prevent content overlap */\n.navbar-spacer {\n  height: 100px; /* Accounts for navbar height + top margin */\n}\n\n/* Theme variants for spacer background - matches section themes */\n.navbar-spacer.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n}\n\n.navbar-spacer.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.navbar-spacer.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.navbar-spacer.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n}\n\n/* Sticky navbar that floats above the spacer */\n.navbar-container {\n  position: fixed;\n  top: 32px;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  padding: 0 80px;\n  box-sizing: border-box;\n}\n\n.navbar {\n  background: var(--colour-background-white, #ffffff);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 8px 40px;\n  box-sizing: border-box;\n  flex-wrap: nowrap; /* Prevent wrapping */\n}\n\n/* Left section */\n.navbar-left {\n  display: flex;\n  align-items: center;\n  gap: 32px;\n  flex-shrink: 0;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* Mobile menu toggle button */\n.mobile-menu-toggle {\n  display: none;\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n  display: block;\n}\n\n.nav-links {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n/* Right section */\n.navbar-right {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-button {\n  display: flex;\n  align-items: center;\n}\n\n/* Dropdown container */\n.dropdown-container {\n  position: absolute;\n  top: 108px;\n  left: 0;\n  right: 0;\n  padding: 0 80px;\n  pointer-events: none;\n  opacity: 0;\n  transform: translateY(-8px);\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown-container.is-open {\n  pointer-events: auto;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.dropdown-panel {\n  background: var(--colour-background-base, #ffffff);\n  border-radius: 32px;\n  overflow: hidden;\n  box-shadow: 0 4px 24px rgba(20, 52, 59, 0.12);\n}\n\n/* Hide empty dropdown slots */\n.dropdown-panel:empty {\n  display: none;\n}\n\n/* Mobile dropdowns container */\n.mobile-dropdowns {\n  display: none;\n}\n\n/* \n * Breakpoint 1: Hide \"Talk to us\" and \"Log in\" (nav-actions) \n * This happens first as the viewport gets narrower\n * Matches affinda.com behavior at ~1100px\n */\n@media (max-width: 1099px) {\n  .nav-actions {\n    display: none;\n  }\n  \n  .navbar-right {\n    gap: 0;\n  }\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .navbar-spacer {\n    height: 88px;\n  }\n\n  .navbar-container {\n    top: 24px;\n    padding: 0 40px;\n  }\n\n  .navbar-left {\n    gap: 24px;\n  }\n\n  .nav-links {\n    gap: 4px;\n  }\n\n  .dropdown-container {\n    padding: 0 40px;\n  }\n}\n\n/* \n * Breakpoint 2: Switch to hamburger menu\n * Matches affinda.com behavior at 991px\n */\n@media (max-width: 991px) {\n  .navbar-spacer {\n    height: 72px;\n  }\n\n  .navbar-container {\n    top: 16px;\n    padding: 0 16px;\n  }\n\n  .navbar {\n    padding: 8px 16px;\n    flex-direction: column;\n    border-radius: 16px;\n    gap: 0;\n    flex-wrap: wrap; /* Allow wrapping in mobile menu */\n  }\n\n  .navbar-left {\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    gap: 16px;\n  }\n\n  /* Show hamburger button on mobile */\n  .mobile-menu-toggle {\n    display: flex;\n  }\n\n  /* Hide nav links by default on mobile */\n  .nav-links {\n    display: none;\n    width: 100%;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    margin-top: 16px;\n    flex-wrap: wrap;\n  }\n\n  /* Show nav links when menu is open */\n  .nav-links.mobile-open {\n    display: flex;\n  }\n\n  /* Hide right section by default on mobile */\n  .navbar-right {\n    display: none;\n    width: 100%;\n    flex-direction: column;\n    gap: 12px;\n    align-items: stretch;\n    margin-top: 16px;\n  }\n\n  /* Show right section when menu is open */\n  .navbar-right.mobile-open {\n    display: flex;\n  }\n\n  /* Show nav-actions again in mobile menu */\n  .nav-actions {\n    display: flex;\n    width: 100%;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n  }\n\n  .nav-button {\n    width: 100%;\n  }\n\n  /* Hide desktop dropdown on mobile */\n  .dropdown-container {\n    display: none;\n  }\n\n  /* Show mobile dropdowns */\n  .mobile-dropdowns {\n    display: block;\n    padding: 0 16px;\n    margin-top: 8px;\n  }\n}\n","import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  @Element() el!: HTMLElement;\n\n  @State() mobileMenuOpen: boolean = false;\n  \n  /** The currently open dropdown identifier (null if none open) */\n  @State() activeDropdown: string | null = null;\n\n  /** Whether to show the default Affinda logo when no logo slot content is provided */\n  @Prop() showDefaultLogo: boolean = true;\n\n  /** Theme for the spacer background - should match the section below the navbar */\n  @Prop() theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n    // Close any open dropdown when toggling mobile menu\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Opens a dropdown by its identifier\n   */\n  private openDropdown = (dropdownId: string) => {\n    this.activeDropdown = dropdownId;\n  };\n\n  /**\n   * Closes the currently open dropdown\n   */\n  private closeDropdown = () => {\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Toggles a dropdown by its identifier\n   */\n  private toggleDropdown = (dropdownId: string) => {\n    if (this.activeDropdown === dropdownId) {\n      this.activeDropdown = null;\n    } else {\n      this.activeDropdown = dropdownId;\n    }\n  };\n\n  /**\n   * Handle clicks outside the navbar to close dropdowns\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  /**\n   * Handle escape key to close dropdowns\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    const hasDropdown = this.activeDropdown !== null;\n\n    return (\n      <Host class={{ 'has-dropdown-open': hasDropdown }}>\n        {/* Spacer element to prevent content from being hidden behind sticky navbar */}\n        <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n        \n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\">\n                  {/* Default Affinda logo if no slot content provided */}\n                  {this.showDefaultLogo && <af-logo></af-logo>}\n                </slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {/* Dropdown panel container */}\n          <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n            <div class=\"dropdown-panel\">\n              <slot name=\"dropdown-solutions\"></slot>\n              <slot name=\"dropdown-pricing\"></slot>\n              <slot name=\"dropdown-resources\"></slot>\n              <slot name=\"dropdown\"></slot>\n            </div>\n          </div>\n        </nav>\n\n        {/* Mobile menu dropdown slots */}\n        {this.mobileMenuOpen && (\n          <div class=\"mobile-dropdowns\">\n            <slot name=\"mobile-menu\"></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.logo-svg {\n  display: block;\n  /* Maintain aspect ratio based on viewBox (9290:1432 ≈ 6.49:1) */\n  width: auto;\n  height: 22px;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n  tag: 'af-logo',\n  styleUrl: 'af-logo.css',\n  shadow: true\n})\nexport class AfLogo {\n  render() {\n    return (\n      <Host>\n        <svg \n          class=\"logo-svg\" \n          viewBox=\"0 0 9290 1432\" \n          aria-label=\"Affinda\"\n          role=\"img\"\n        >\n          <path \n            fill=\"currentColor\" \n            d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n          <path \n            fill=\"currentColor\" \n            d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n          <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.esm.js","sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx","src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx","src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=scoped","src/components/af-nav-item/af-nav-item.tsx","src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=scoped","src/components/af-navbar/af-navbar.tsx","src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.heading {\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n}\n\n/* Alignment - inherits from --af-text-align if set, otherwise uses explicit align prop */\n.align-inherit {\n  text-align: var(--af-text-align, left);\n}\n\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Heading XL */\n.level-xl {\n  font-size: var(--font-size-heading-xl-mobile, 50px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-xl {\n    font-size: var(--font-size-heading-xl-desktop, 80px);\n  }\n}\n\n/* Heading 1 */\n.level-1 {\n  font-size: var(--font-size-heading-1-mobile, 38px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-1 {\n    font-size: var(--font-size-heading-1-desktop, 56px);\n  }\n}\n\n/* Heading 2 */\n.level-2 {\n  font-size: var(--font-size-heading-2-mobile, 32px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-2 {\n    font-size: var(--font-size-heading-2-desktop, 44px);\n  }\n}\n\n/* Heading 3 */\n.level-3 {\n  font-size: var(--font-size-heading-3-mobile, 25px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-3 {\n    font-size: var(--font-size-heading-3-desktop, 34px);\n  }\n}\n\n/* Heading 4 */\n.level-4 {\n  font-size: var(--font-size-heading-4-mobile, 20px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-4 {\n    font-size: var(--font-size-heading-4-desktop, 24px);\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n\n/* Heading 5 */\n.level-5 {\n  font-size: var(--font-size-heading-5-mobile, 18px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-5 {\n    font-size: var(--font-size-heading-5-desktop, 20px);\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) */\n  @Prop() align: 'inherit' | 'left' | 'center' | 'right' = 'inherit';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.text {\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-bodyfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n  letter-spacing: var(--letter-spacing-body, 0);\n  /* Inherit alignment from parent context (e.g. typography lockup), default to left */\n  text-align: var(--af-text-align, left);\n}\n\n/* Alignment */\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Body variants */\n.variant-xlarge {\n  font-size: var(--font-size-body-xlarge, 22px);\n  line-height: var(--line-height-body-xlarge, 28px);\n}\n\n.variant-large {\n  font-size: var(--font-size-body-large, 18px);\n  line-height: var(--line-height-body-large, 26px);\n}\n\n.variant-medium {\n  font-size: var(--font-size-body-medium, 16px);\n  line-height: var(--line-height-body-medium, 24px);\n}\n\n.variant-small {\n  font-size: var(--font-size-body-small, 14px);\n  line-height: var(--line-height-body-small, 20px);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Text/body component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' = 'medium';\n\n  /** Visual alignment. When not set, inherits from parent context (e.g. typography lockup). */\n  @Prop() align?: 'left' | 'center' | 'right';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: !!this.align\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n}\n\n/* Mobile breakpoint - full width block display */\n:host([breakpoint=\"mobile\"]) {\n  display: block;\n  width: 100%;\n}\n\n.nav-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n.nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n/* Primary hierarchy - bold main navigation */\n.hierarchy-primary {\n  padding: 12px;\n  justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  gap: 10px;\n}\n\n/* Primary variant 01 - darker */\n.hierarchy-primary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-book, 500);\n  line-height: 20px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Add transparent border to prevent layout shift on hover */\n.hierarchy-primary.variant-01 .label-container {\n  border-bottom: 1px solid transparent;\n}\n\n/* Primary variant 02 - lighter for light backgrounds */\n.hierarchy-primary.variant-02 {\n  font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 20px;\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Hover state for primary variant-01 - show underline */\n.hierarchy-primary.variant-01:hover .label-container {\n  border-bottom-color: currentColor;\n}\n\n/* Active state for primary variant-01 - thicker border */\n.hierarchy-primary.variant-01.active .label-container {\n  border-bottom: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  /* Adjust margin to prevent shift from 1px to 2px border */\n  margin-bottom: -1px;\n}\n\n/* Hover and active states for variant-02 (light backgrounds) - no border */\n.hierarchy-primary.variant-02:hover {\n  background-color: rgba(20, 52, 59, 0.04);\n  border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n  background-color: rgba(20, 52, 59, 0.08);\n  border-radius: 8px;\n}\n\n/* Secondary hierarchy - smaller sub-navigation */\n.hierarchy-secondary {\n  padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-height: 24px;\n  gap: 10px;\n}\n\n/* Secondary variant 01 - medium weight */\n.hierarchy-secondary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Secondary variant 02 - regular weight */\n.hierarchy-secondary.variant-02 {\n  font-family: var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Hover state for secondary - underline text */\n.hierarchy-secondary:hover .label-container {\n  text-decoration: underline;\n}\n\n/* Focus states for accessibility */\n.nav-item:focus-within {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Remove default focus outline on link */\n.nav-link:focus {\n  outline: none;\n}\n\n.nav-link:focus-visible + .nav-item,\n:host(:focus-visible) .nav-item {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Mobile breakpoint styles - explicit via prop */\n.hierarchy-primary.breakpoint-mobile {\n  padding: 20px 12px;\n  border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n  width: 100%;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.breakpoint-mobile .label-container {\n  flex: 1;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.variant-01.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n}\n\n.hierarchy-primary.variant-02.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n  color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Mobile breakpoint for secondary hierarchy */\n.hierarchy-secondary.breakpoint-mobile {\n  padding: 2px 0;\n  height: 40px;\n}\n\n.hierarchy-secondary.breakpoint-mobile .label-container {\n  min-height: 24px;\n}\n\n/* Mobile removes the hover underline effect */\n.hierarchy-primary.breakpoint-mobile.variant-01 .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01:hover .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01.active .label-container {\n  border-bottom-color: transparent;\n  margin-bottom: 0;\n}\n\n/* Icon sizing and styling */\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n/* Icon color inheritance for primary hierarchy */\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Icon rotation on hover for desktop primary with dropdown indicator */\n.hierarchy-primary.variant-01.breakpoint-desktop:hover ::slotted([slot=\"icon-right\"]),\n.hierarchy-primary.variant-01.breakpoint-desktop.active ::slotted([slot=\"icon-right\"]) {\n  transform: rotate(180deg);\n}\n\n/* Icon rotation on active for mobile primary with dropdown indicator */\n.hierarchy-primary.breakpoint-mobile.active ::slotted([slot=\"icon-right\"]) {\n  transform: rotate(180deg);\n}\n\n/* Secondary hierarchy - smaller icons */\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon color inheritance for secondary hierarchy */\n.hierarchy-secondary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-secondary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Fallback media query for when breakpoint prop is not set */\n@media (max-width: 991px) {\n  :host([breakpoint=\"auto\"]) .hierarchy-primary,\n  :host(:not([breakpoint])) .hierarchy-primary {\n    padding: 20px 12px;\n    border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n    width: 100%;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary .label-container,\n  :host(:not([breakpoint])) .hierarchy-primary .label-container {\n    flex: 1;\n    justify-content: flex-start;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-01,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-01 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-02,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-02 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n    color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n  }\n\n  /* Icon rotation on active for auto/responsive breakpoint */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n\n  /* Disable desktop hover rotation in mobile view */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]) {\n    transform: none;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavItem {\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles\n   * - 'mobile': Mobile-specific styles (larger text, different spacing)\n   */\n  @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'active': this.active\n    };\n\n    const content = (\n      <div class={classes}>\n        <slot name=\"icon-left\"></slot>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        <slot name=\"icon-right\"></slot>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n",":host {\n  display: block;\n  width: 100%;\n}\n\n/* Spacer element that sits in normal document flow to prevent content overlap */\n.navbar-spacer {\n  height: 100px; /* Accounts for navbar height + top margin */\n}\n\n/* Theme variants for spacer background - matches section themes */\n.navbar-spacer.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n}\n\n.navbar-spacer.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.navbar-spacer.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.navbar-spacer.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n}\n\n/* Sticky navbar that floats above the spacer */\n.navbar-container {\n  position: fixed;\n  top: 32px;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  padding: 0 80px;\n  box-sizing: border-box;\n}\n\n.navbar {\n  background: var(--colour-background-white, #ffffff);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 8px 40px;\n  box-sizing: border-box;\n  flex-wrap: nowrap; /* Prevent wrapping */\n}\n\n/* Left section */\n.navbar-left {\n  display: flex;\n  align-items: center;\n  gap: 32px;\n  flex-shrink: 0;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* Mobile menu toggle button */\n.mobile-menu-toggle {\n  display: none;\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n  display: block;\n}\n\n.nav-links {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n/* Right section */\n.navbar-right {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-button {\n  display: flex;\n  align-items: center;\n}\n\n/* Dropdown container */\n.dropdown-container {\n  position: absolute;\n  top: 108px;\n  left: 0;\n  right: 0;\n  padding: 0 80px;\n  pointer-events: none;\n  opacity: 0;\n  transform: translateY(-8px);\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown-container.is-open {\n  pointer-events: auto;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.dropdown-panel {\n  background: var(--colour-background-base, #ffffff);\n  border-radius: 32px;\n  overflow: hidden;\n  box-shadow: 0 4px 24px rgba(20, 52, 59, 0.12);\n}\n\n/* Hide empty dropdown slots */\n.dropdown-panel:empty {\n  display: none;\n}\n\n/* Mobile menu panel - separate from navbar for proper positioning */\n.mobile-menu-panel {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--colour-background-base, #ffffff);\n  z-index: 9;\n  padding: 100px 16px 24px 16px;\n  overflow-y: auto;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n.mobile-menu-panel.is-open {\n  display: block;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Mobile CTA button container */\n.mobile-button-container {\n  margin-bottom: 8px;\n}\n\n.mobile-button-container ::slotted(*) {\n  width: 100%;\n}\n\n/* Mobile menu content */\n.mobile-menu-content {\n  width: 100%;\n}\n\n/* \n * Breakpoint 1: Hide \"Talk to us\" and \"Log in\" (nav-actions) \n * This happens first as the viewport gets narrower\n * Matches affinda.com behavior at ~1100px\n */\n@media (max-width: 1099px) {\n  .nav-actions {\n    display: none;\n  }\n  \n  .navbar-right {\n    gap: 0;\n  }\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .navbar-spacer {\n    height: 88px;\n  }\n\n  .navbar-container {\n    top: 24px;\n    padding: 0 40px;\n  }\n\n  .navbar-left {\n    gap: 24px;\n  }\n\n  .nav-links {\n    gap: 4px;\n  }\n\n  .dropdown-container {\n    padding: 0 40px;\n  }\n}\n\n/* \n * Breakpoint 2: Switch to hamburger menu\n * Matches affinda.com behavior at 991px\n */\n@media (max-width: 991px) {\n  .navbar-spacer {\n    height: 72px;\n  }\n\n  .navbar-container {\n    top: 16px;\n    padding: 0 16px;\n    z-index: 11; /* Above mobile menu panel */\n  }\n\n  .navbar {\n    padding: 8px 8px 8px 24px; /* Figma: 8px padding right, 24px left on mobile */\n    flex-direction: row;\n    border-radius: 9999px; /* Keep pill shape on mobile */\n    gap: 0;\n  }\n\n  .navbar-left {\n    width: auto;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n  }\n\n  /* Show hamburger button on mobile */\n  .mobile-menu-toggle {\n    display: flex;\n    padding: 12px;\n    margin-left: auto;\n    border-radius: 9999px;\n    border: 1px solid var(--colour-brand-inkwell, #14343b);\n  }\n\n  .mobile-menu-toggle:hover {\n    background: rgba(20, 52, 59, 0.05);\n  }\n\n  /* Hide nav links on mobile - they're in the mobile menu panel */\n  .nav-links {\n    display: none;\n  }\n\n  /* Hide right section on mobile - button is in mobile menu panel */\n  .navbar-right {\n    display: none;\n  }\n\n  /* Hide desktop dropdown on mobile */\n  .dropdown-container {\n    display: none;\n  }\n\n  /* Mobile menu panel adjustments */\n  .mobile-menu-panel {\n    padding-top: 88px; /* Accounts for navbar height */\n  }\n\n  .mobile-button-container {\n    padding: 0 12px;\n    margin-bottom: 8px;\n  }\n\n  .mobile-button-container ::slotted(af-button),\n  .mobile-button-container ::slotted(button) {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n}\n\n/* ==========================================================================\n   Force Mobile Mode\n   Apply mobile styles regardless of viewport when force-mobile attribute is set\n   ========================================================================== */\n\n:host([force-mobile]) .navbar-spacer {\n  height: 72px;\n}\n\n:host([force-mobile]) .navbar-container {\n  top: 16px;\n  padding: 0 16px;\n  z-index: 11;\n}\n\n:host([force-mobile]) .navbar {\n  padding: 8px 8px 8px 24px;\n  flex-direction: row;\n  border-radius: 9999px;\n  gap: 0;\n}\n\n:host([force-mobile]) .navbar-left {\n  width: auto;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n}\n\n:host([force-mobile]) .mobile-menu-toggle {\n  display: flex;\n  padding: 12px;\n  margin-left: auto;\n  border-radius: 9999px;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n}\n\n:host([force-mobile]) .mobile-menu-toggle:hover {\n  background: rgba(20, 52, 59, 0.05);\n}\n\n:host([force-mobile]) .nav-links {\n  display: none;\n}\n\n:host([force-mobile]) .navbar-right {\n  display: none;\n}\n\n:host([force-mobile]) .nav-actions {\n  display: none;\n}\n\n:host([force-mobile]) .dropdown-container {\n  display: none;\n}\n\n:host([force-mobile]) .mobile-menu-panel {\n  padding-top: 88px;\n}\n\n:host([force-mobile]) .mobile-menu-panel.is-open {\n  display: block;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n:host([force-mobile]) .mobile-button-container {\n  padding: 0 12px;\n  margin-bottom: 8px;\n}\n\n:host([force-mobile]) .mobile-button-container ::slotted(af-button),\n:host([force-mobile]) .mobile-button-container ::slotted(button) {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n","import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n * \n * **Slots:**\n * - `logo` - Logo area (defaults to Affinda logo if empty)\n * - `start` - Primary navigation links (left side, desktop)\n * - `end` - Secondary/utility links (right side)\n * - `button` - Call-to-action button\n * - `dropdown-solutions` - Mega-menu for Solutions dropdown\n * - `dropdown-pricing` - Mega-menu for Pricing dropdown  \n * - `dropdown-resources` - Mega-menu for Resources dropdown\n * - `dropdown` - Generic dropdown slot\n * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)\n * - `mobile-button` - CTA button for mobile menu (appears at top)\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavbar {\n  @Element() el!: HTMLElement;\n\n  @State() mobileMenuOpen: boolean = false;\n  \n  /** The currently open dropdown identifier (null if none open) */\n  @State() activeDropdown: string | null = null;\n\n  /** Whether to show the default Affinda logo when no logo slot content is provided */\n  @Prop() showDefaultLogo: boolean = true;\n\n  /** Theme for the spacer background - should match the section below the navbar */\n  @Prop() theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';\n\n  /** Force mobile layout regardless of viewport size (useful for testing/stories) */\n  @Prop({ reflect: true }) forceMobile: boolean = false;\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n    // Close any open dropdown when toggling mobile menu\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Opens a dropdown by its identifier\n   */\n  private openDropdown = (dropdownId: string) => {\n    this.activeDropdown = dropdownId;\n  };\n\n  /**\n   * Closes the currently open dropdown\n   */\n  private closeDropdown = () => {\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Toggles a dropdown by its identifier\n   */\n  private toggleDropdown = (dropdownId: string) => {\n    if (this.activeDropdown === dropdownId) {\n      this.activeDropdown = null;\n    } else {\n      this.activeDropdown = dropdownId;\n    }\n  };\n\n  /**\n   * Handle clicks outside the navbar to close dropdowns\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  /**\n   * Handle escape key to close dropdowns\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    const hasDropdown = this.activeDropdown !== null;\n\n    return (\n      <Host class={{ 'has-dropdown-open': hasDropdown }}>\n        {/* Spacer element to prevent content from being hidden behind sticky navbar */}\n        <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n        \n        <nav class=\"navbar-container\">\n          <div class=\"navbar theme-white\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\">\n                  {/* Default Affinda logo if no slot content provided */}\n                  {this.showDefaultLogo && <af-logo></af-logo>}\n                </slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {/* Dropdown panel container */}\n          <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n            <div class=\"dropdown-panel theme-white\">\n              <slot name=\"dropdown-solutions\"></slot>\n              <slot name=\"dropdown-pricing\"></slot>\n              <slot name=\"dropdown-resources\"></slot>\n              <slot name=\"dropdown\"></slot>\n            </div>\n          </div>\n        </nav>\n\n        {/* Mobile menu panel */}\n        <div class={`mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}`}>\n          {/* Mobile CTA button at top */}\n          <div class=\"mobile-button-container\">\n            <slot name=\"mobile-button\">\n              <slot name=\"button\"></slot>\n            </slot>\n          </div>\n          \n          {/* Mobile navigation content */}\n          <div class=\"mobile-menu-content\">\n            <slot name=\"mobile-menu\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n}\n\n.logo-svg {\n  display: block;\n  /* Maintain aspect ratio based on viewBox (9290:1432 ≈ 6.49:1) */\n  width: auto;\n  height: 22px;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n  tag: 'af-logo',\n  styleUrl: 'af-logo.css',\n  shadow: true\n})\nexport class AfLogo {\n  render() {\n    return (\n      <Host>\n        <svg \n          class=\"logo-svg\" \n          viewBox=\"0 0 9290 1432\" \n          aria-label=\"Affinda\"\n          role=\"img\"\n        >\n          <path \n            fill=\"currentColor\" \n            d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n          <path \n            fill=\"currentColor\" \n            d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n          <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-inline.entry.esm.js","sources":["src/components/af-inline/af-inline.css?tag=af-inline&encapsulation=shadow","src/components/af-inline/af-inline.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\ntype Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\n/**\n * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.\n * Ideal for button groups, tags, pills, and other inline elements.\n *\n * @slot - Content to layout inline\n */\n@Component({\n  tag: 'af-inline',\n  styleUrl: 'af-inline.css',\n  shadow: true,\n})\nexport class AfInline {\n  /**\n   * Gap between items using space tokens (1-8).\n   * Maps to --space-1 through --space-8 (4px to 32px).\n   */\n  @Prop() gap: Gap = '2';\n\n  /**\n   * Align items on the cross axis.\n   */\n  @Prop() align: Align = 'center';\n\n  /**\n   * Justify content on the main axis.\n   */\n  @Prop() justify: Justify = 'start';\n\n  /**\n   * Whether items should wrap to the next line when they overflow.\n   */\n  @Prop() wrap: boolean = true;\n\n  render() {\n    const alignMap: Record<Align, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n\n    const justifyMap: Record<Justify, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      between: 'space-between',\n      around: 'space-around',\n      evenly: 'space-evenly',\n    };\n\n    const style = {\n      display: 'inline-flex',\n      flexDirection: 'row',\n      gap: `var(--space-${this.gap})`,\n      alignItems: alignMap[this.align],\n      justifyContent: justifyMap[this.justify],\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    } as Record<string, string>;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,+EAA+E;;MCiBtF,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,QAAQ;AAE/B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,OAAO;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,IAAI;AAmC7B;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;AAED,QAAA,MAAM,UAAU,GAA4B;AAC1C,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,cAAc;SACvB;AAED,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AAC/B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,YAAA,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;SACd;QAE3B,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}