npm - @affinda/wc - Versions diffs - 0.3.1 → 0.4.1 - Mend

@affinda/wc 0.3.1 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (499) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-accordion-item.entry.esm.js","sources":["src/components/af-accordion-item/af-accordion-item.css?tag=af-accordion-item&encapsulation=shadow","src/components/af-accordion-item/af-accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.accordion-item {\n width: 100%;\n}\n\n/* Trigger button - clickable header /\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 0;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n cursor: pointer;\n font: inherit;\n text-align: left;\n color: var(--af-typography-body-dark, #14343b);\n transition: background-color 0.2s ~~ease~~;\n}\n\n.trigger:hover:not(:disabled) {\n background-color: var(--af-background-base-hover, rgba(20, 52, 59, 0.02));\n}\n\n.trigger:focus-visible {\n outline: 2px solid var(--af-background-border-active, #8a7049);\n outline-offset: -2px;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.trigger-content {\n flex: 1;\n min-width: 0;\n}\n\n/ Chevron indicator /\n.chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-typography-body-dark, #14343b);\n transition: transform 0.3s ~~ease~~;\n}\n\n.chevron.is-open {\n transform: rotate(180deg);\n}\n\n/ Content wrapper - handles animation /\n.content-wrapper {\n overflow: hidden;\n transition: max-height 0.3s ~~ease~~;\n}\n\n.content {\n padding: 0;\n}\n\n/ Disabled state /\n:host(.is-disabled) .trigger {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n background-color: transparent;\n}\n\n/ Open state styling /\n:host(.is-open) .trigger {\n border-bottom-color: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/\n A single collapsible accordion item with header and content.\n * Can be used standalone or within an af-accordion container.\n \n @slot trigger - The clickable header content\n * @slot - The collapsible content (default slot)\n /\n@Component({\n tag: 'af-accordion-item',\n styleUrl: 'af-accordion-item.css',\n shadow: true,\n})\nexport class AfAccordionItem {\n @Element() el!: HTMLElement;\n\n /\n Unique identifier for this accordion item.\n * Used by parent af-accordion to track open state.\n /\n @Prop({ reflect: true }) itemId!: string;\n\n /\n Whether this item is currently expanded\n /\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n /\n Whether this item is disabled (cannot be toggled)\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Emitted when the accordion item is toggled\n /\n @Event({ eventName: 'af-accordion-toggle' }) accordionToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n @State() contentHeight: number = 0;\n\n private contentRef?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.measureContent();\n }\n }\n\n componentDidLoad() {\n if (this.open) {\n this.measureContent();\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n if (this.open && this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n });\n\n if (this.contentRef) {\n this.resizeObserver.observe(this.contentRef);\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n /\n Programmatically toggle the accordion item\n */\n @Method()\n async toggle() {\n if (!this.disabled) {\n this.open = !this.open;\n this.accordionToggle.emit({ itemId: this.itemId, open: this.open });\n }\n }\n\n private measureContent() {\n requestAnimationFrame(() => {\n if (this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n });\n }\n\n private handleTriggerClick = () => {\n if (!this.disabled) {\n this.toggle();\n }\n };\n\n render() {\n const contentStyle = {\n maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n };\n\n return (\n <Host class={{ 'is-open': this.open, 'is-disabled': this.disabled }}>\n <div class=\"accordion-item\">\n <button\n class=\"trigger\"\n onClick={this.handleTriggerClick}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n disabled={this.disabled}\n type=\"button\"\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\"></slot>\n </div>\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </button>\n <div\n id={`content-${this.itemId}`}\n class=\"content-wrapper\"\n style={contentStyle}\n aria-hidden={!this.open ? 'true' : 'false'}\n >\n <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;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;AAqD1B,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,MAAM,EAAE;;AAEjB,SAAC;AAyCF;AA5FC,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,cAAc,EAAE;;;IAIzB,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,cAAc,EAAE;;AAGvB,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;AAClB,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;QACpB,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;AACJ,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;;;;;;;;;;;"}
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 var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\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 var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\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 var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .trigger,\n .chevron,\n .content-wrapper {\n transition-duration: 0.01ms;\n }\n}\n\n.content {\n padding: 0;\n}\n\n/ Disabled state /\n:host(.is-disabled) .trigger {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n background-color: transparent;\n}\n\n/ Open state styling /\n:host(.is-open) .trigger {\n border-bottom-color: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/\n A single collapsible accordion item with header and content.\n * Can be used standalone or within an af-accordion container.\n \n @slot trigger - The clickable header content\n * @slot - The collapsible content (default slot)\n /\n@Component({\n tag: 'af-accordion-item',\n styleUrl: 'af-accordion-item.css',\n shadow: true,\n})\nexport class AfAccordionItem {\n @Element() el!: HTMLElement;\n\n /\n Unique identifier for this accordion item.\n * Used by parent af-accordion to track open state.\n /\n @Prop({ reflect: true }) itemId!: string;\n\n /\n Whether this item is currently expanded\n /\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n /\n Whether this item is disabled (cannot be toggled)\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Emitted when the accordion item is toggled\n /\n @Event({ eventName: 'af-accordion-toggle' }) accordionToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n @State() contentHeight: number = 0;\n\n private contentRef?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.measureContent();\n }\n }\n\n componentDidLoad() {\n if (this.open) {\n this.measureContent();\n }\n\n this.resizeObserver = new ResizeObserver(() => {\n if (this.open && this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n });\n\n if (this.contentRef) {\n this.resizeObserver.observe(this.contentRef);\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n /\n Programmatically toggle the accordion item\n */\n @Method()\n async toggle() {\n if (!this.disabled) {\n this.open = !this.open;\n this.accordionToggle.emit({ itemId: this.itemId, open: this.open });\n }\n }\n\n private measureContent() {\n requestAnimationFrame(() => {\n if (this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n });\n }\n\n private handleTriggerClick = () => {\n if (!this.disabled) {\n this.toggle();\n }\n };\n\n render() {\n const contentStyle = {\n maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n };\n\n return (\n <Host class={{ 'is-open': this.open, 'is-disabled': this.disabled }}>\n <div class=\"accordion-item\">\n <button\n class=\"trigger\"\n onClick={this.handleTriggerClick}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n disabled={this.disabled}\n type=\"button\"\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\"></slot>\n </div>\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </button>\n <div\n id={`content-${this.itemId}`}\n class=\"content-wrapper\"\n style={contentStyle}\n aria-hidden={!this.open ? 'true' : 'false'}\n >\n <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

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

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

	@@ -1 +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 / radius-lg (20px) is the Affinda card corner — replaces the bespoke\n * `--border-radius-card-level-1` that previously shimmed in at 32px.\n * Consumers can still override by setting `--af-card-radius` on the host. /\n border-radius: var(--af-card-radius, var(--radius-lg, 20px));\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n/ ==========================================================================\n Theme Variants\n \n Background colors from Figma tokens:\n - white: #ffffff (Colour/Brand/White)\n - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n - soft-clay: #c0ab8d (Colour/Softclay/400)\n ========================================================================== /\n\n/ WHITE THEME /\n.card.theme-white {\n background-color: var(--colour-brand-white, #ffffff);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/ WHITE-IVORY THEME /\n.card.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/ INKWELL THEME (Dark) /\n.card.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n / Typography - light colors on dark background /\n --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n --af-background-level-1: var(--colour-inkwell-450, #203e45);\n \n / Button variants for dark theme /\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/ MIST-GREEN THEME /\n.card.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/ SOFT-CLAY THEME /\n.card.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/ ==========================================================================\n Card Content\n ========================================================================== /\n\n.card__content {\n position: relative;\n padding: var(--af-card-padding, 40px);\n display: flex;\n flex-direction: column;\n gap: var(--af-card-gap, 24px);\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/ Heading spacing within cards /\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/ Text line-height within cards /\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\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?: Theme = '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~~;;~~MCgB5/F~~,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;;;;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;;;;;;;"}
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 / radius-lg (20px) is the Affinda card corner — replaces the bespoke\n * `--border-radius-card-level-1` that previously shimmed in at 32px.\n * Consumers can still override by setting `--af-card-radius` on the host. /\n border-radius: var(--af-card-radius, var(--radius-lg, 20px));\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n/ ==========================================================================\n Interactive Mode\n Opt-in hover lift for cards that are the primary click target. Adds a\n subtle translateY and shadow on hover; the card is raised, not tinted,\n so the themed background stays intact.\n ========================================================================== /\n\n:host([interactive]) .card {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n will-change: transform;\n}\n\n:host([interactive]:hover) .card,\n:host([interactive]:focus-within) .card {\n transform: translateY(-2px);\n box-shadow: var(--shadow-lift, 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08));\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host([interactive]) .card {\n transition-duration: 0.01ms;\n }\n :host([interactive]:hover) .card,\n :host([interactive]:focus-within) .card {\n transform: none;\n }\n}\n\n/ ==========================================================================\n Theme Variants\n \n Background colors from Figma tokens:\n - white: #ffffff (Colour/Brand/White)\n - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n - soft-clay: #c0ab8d (Colour/Softclay/400)\n ========================================================================== /\n\n/ WHITE THEME /\n.card.theme-white {\n background-color: var(--colour-brand-white, #ffffff);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/ WHITE-IVORY THEME /\n.card.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/ INKWELL THEME (Dark) /\n.card.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n / Typography - light colors on dark background /\n --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n --af-background-level-1: var(--colour-inkwell-450, #203e45);\n \n / Button variants for dark theme /\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/ MIST-GREEN THEME /\n.card.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/ SOFT-CLAY THEME /\n.card.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/ ==========================================================================\n Card Content\n ========================================================================== /\n\n.card__content {\n position: relative;\n padding: var(--af-card-padding, 40px);\n display: flex;\n flex-direction: column;\n gap: var(--af-card-gap, 24px);\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/ Heading spacing within cards /\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/ Text line-height within cards /\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\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?: Theme = '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 /\n When true, the card reacts to pointer hover with a subtle lift\n * (translateY + shadow). Use for cards that are themselves the primary\n * click target (e.g. wrapped in an `<a>` or using `onClick`). Purely\n * cosmetic — does not change focus or click behaviour. Honours\n * `prefers-reduced-motion: reduce`.\n */\n @Prop({ reflect: true }) interactive: 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,4vHAA4vH;;MCgBjwH,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;;;;;AAMG;AACsB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAkBtD;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-feature-accordion.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-feature-accordion.entry.esm.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/\n af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n \n --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n \n The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n \n --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n /\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n / Inherits theme from parent Section via CSS custom properties /\n padding: 0 24px;\n\n / Internal custom properties that inherit from parent Section's theme /\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/ Accordion List /\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/ Accordion Item /\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/ Collapsed items have lighter text /\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/ Timer track - the progress bar at the bottom of expanded items /\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/ Image Container - stretches full height to align with accordion /\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n / Flows from parent Section's theme; mist-green fallback for unthemed use /\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ Tablet /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/ Mobile /\n/ mobile-only /\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/\n Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * Must be wrapped in a Section component to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n /\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /* Section heading /\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /* JSON string of accordion items /\n @Prop() items: string = '[]';\n\n /* Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) /\n @Prop() cycleInterval: number = 6000;\n\n /* Whether auto-cycling is enabled /\n @Prop() autoCycle: boolean = true;\n\n /* Currently expanded item index /\n @State() expandedIndex: number = 0;\n\n /* Progress of current timer (0-100) /\n @State() timerProgress: number = 100;\n\n private progressTimer: number \| null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion /}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button \n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n <span class=\"accordion-item__icon\">\n {this.expandedIndex === index ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n )}\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/ Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt \|\| currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"af-feature-accordion.entry.esm.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/\n af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n \n --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n \n The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n \n --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n /\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n / Inherits theme from parent Section via CSS custom properties /\n padding: 0 24px;\n\n / Internal custom properties that inherit from parent Section's theme /\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/ Accordion List /\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/ Accordion Item /\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/ Collapsed items have lighter text /\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n/ Plus → minus morph: vertical bar collapses and the whole icon rotates\n 45° when expanding, giving a single, fluid gesture. /\n.accordion-item__icon-bar {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n transform-origin: 12px 12px;\n}\n\n.accordion-item--expanded .accordion-item__icon-bar--vert {\n transform: scaleY(0);\n opacity: 0;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition:\n max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-item__icon,\n .accordion-item__icon-bar,\n .accordion-item__content,\n .accordion-item__title {\n transition-duration: 0.01ms;\n }\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/ Timer track - the progress bar at the bottom of expanded items /\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/ Image Container - stretches full height to align with accordion /\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n / Flows from parent Section's theme; mist-green fallback for unthemed use /\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ Tablet /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/ Mobile /\n/ mobile-only /\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/\n Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * Must be wrapped in a Section component to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n /\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /* Section heading /\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /* JSON string of accordion items /\n @Prop() items: string = '[]';\n\n /* Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) /\n @Prop() cycleInterval: number = 6000;\n\n /* Whether auto-cycling is enabled /\n @Prop() autoCycle: boolean = true;\n\n /* Currently expanded item index /\n @State() expandedIndex: number = 0;\n\n /* Progress of current timer (0-100) /\n @State() timerProgress: number = 100;\n\n private progressTimer: number \| null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion /}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button\n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n {/ Plus → minus: a single SVG with two strokes, the\n vertical one rotated-out to zero when expanded. This\n gives a fluid morph instead of swapping SVGs mid-\n animation. /}\n <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path class=\"accordion-item__icon-bar\" d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n <path class=\"accordion-item__icon-bar accordion-item__icon-bar--vert\" d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/ Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt \|\| currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,ipKAAipK;;MC8BlqK,kBAAkB,GAAA,MAAA;AAN/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAO,CAAA,OAAA,GAAW,+BAA+B;;AAGjD,QAAA,IAAK,CAAA,KAAA,GAAW,IAAI;;AAGpB,QAAA,IAAa,CAAA,aAAA,GAAW,IAAI;;AAG5B,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;AAGxB,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;;AAGzB,QAAA,IAAa,CAAA,aAAA,GAAW,GAAG;AAE5B,QAAA,IAAa,CAAA,aAAA,GAAkB,IAAI;AACnC,QAAA,IAAiB,CAAA,iBAAA,GAAW,CAAC;AA6JtC;IA3JC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,YAAY,EAAE;;;IAIvB,oBAAoB,GAAA;QAClB,IAAI,CAAC,WAAW,EAAE;;AAIpB,IAAA,qBAAqB,CAAC,QAAiB,EAAA;QACrC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,YAAY,EAAE;;aACd;YACL,IAAI,CAAC,WAAW,EAAE;;;IAId,QAAQ,GAAA;AACd,QAAA,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAC7B,QAAA,MAAM;AACN,YAAA,OAAO,EAAE;;;IAIL,YAAY,GAAA;QAClB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,EAAE;AACnC,QAAA,IAAI,CAAC,aAAa,GAAG,GAAG;;QAGxB,MAAM,cAAc,GAAG,MAAK;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,iBAAiB;AACnD,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO;AAE9C,YAAA,IAAI,SAAS,IAAI,CAAC,EAAE;gBAClB,IAAI,CAAC,cAAc,EAAE;;iBAChB;AACL,gBAAA,IAAI,CAAC,aAAa,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,GAAG;AAC3D,gBAAA,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC;;AAE9D,SAAC;AAED,QAAA,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC;;IAGpD,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;AACxC,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;;;IAIrB,cAAc,GAAA;AACpB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE;AAExB,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;;QAE5D,IAAI,CAAC,YAAY,EAAE;;AAGb,IAAA,eAAe,CAAC,KAAa,EAAA;;AAEnC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAE1B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,YAAY,EAAE;;;IAIvB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAE7C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAM,EAE1D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EAErC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,IACjC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACrB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,0BAA0B,EAAE,IAAI,CAAC,aAAa,KAAK;AACpD,aAAA,EACD,GAAG,EAAE,KAAK,EAAA,EAEV,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAA,eAAA,EAC3B,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,EAAA,EAE9D,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAM,EAKnD,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sBAAsB,EAAA,aAAA,EAAa,MAAM,EAAA,EACnD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,0BAA0B,EAAC,CAAC,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAE,CAAA,EACnH,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,yDAAyD,EAAC,CAAC,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAE,CAAA,CAC9I,CACD,CACA,EACT,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,OAAO,GAAG,GAAG;AACvD,gBAAA,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,GAAG,GAAG;AAC/C,aAAA,EAAA,EAED,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,WAAW,CAAK,EAC5D,IAAI,CAAC,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,KAC7C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,aAAa,GAAG,EAAE,EACrC,CAAA,CACH,CACP,CACG,CACF,CACP,CAAC,CACE,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC1C,WAAW,EAAE,QAAQ,KACpB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,WAAW,CAAC,QAAQ,EACzB,GAAG,EAAE,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,KAAK,EAC9C,KAAK,EAAC,0BAA0B,EAAA,CAChC,CACH,EACA,CAAC,WAAW,EAAE,QAAQ,KACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sCAAsC,EAAA,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACP,CACG,CACF,CACF,CACF,CACF,CACD;;;;;;;;;;;"}

package/dist/affinda/af-hero.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-hero.entry.esm.js","sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). /\n --af-hero-image-lift: -260px;\n / Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. /\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/ -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- /\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n / Default size — consumers can resize the slotted decoration via its\n own width/height props. /\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/ -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- /\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/ Centered variant uses slightly tighter top padding to match the live\n /platform hero (80px), since the lockup is typically tall. /\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 80px;\n}\n\n/ -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- /\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/ Illustration variants use a looser two-column split so the art\n doesn't dominate. /\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n.hero__copy {\n / Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. /\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n / Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. /\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has()) {\n display: none;\n}\n\n.hero__badge:has() {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/ -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- /\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/ Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. /\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/ -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- /\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: none;\n}\n\n/ -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- /\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has()) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. /\n:host(.hero--inkwell-photo) .hero__logos:has() {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- /\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n / Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. /\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has() {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n \| 'inkwell-photo'\n \| 'inkwell-illustration'\n \| 'inkwell-centered'\n \| 'soft-clay-illustration'\n \| 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' \| 'loose';\n\n/*\n Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n /\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/\n Mobile blob shape — simpler D-curve matching the live mobile banner.\n /\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/\n Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n /\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' \| 'soft-clay' \| 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/\n Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n \n - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n \n ## Slots\n \n - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n \n ## Float-navbar handling\n \n When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n \n ## Image lift\n \n The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n /\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /* Layout / theme preset. See variant docs in the component header. /\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /* Heading text (use the default slot for richer markup). /\n @Prop() heading: string = '';\n\n /* Description text (use the `description` slot for richer markup). /\n @Prop() description: string = '';\n\n /\n Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n /\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /\n Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n /\n @Prop() topPad: HeroTopPad = 'default';\n\n /* Typography lockup max-width (px). Defaults to 620, matching the live site. /\n @Prop() maxWidth: number = 620;\n\n /\n Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' \|\|\n this.variant === 'inkwell-illustration' \|\|\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' \|\|\n v === 'soft-clay-illustration' \|\|\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"af-hero.entry.esm.js","sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). /\n --af-hero-image-lift: -260px;\n / Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. /\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/ -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- /\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n / Default size — consumers can resize the slotted decoration via its\n own width/height props. /\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/ -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- /\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/ Centered variant: leave clear breathing room under the floating navbar\n pill so the heading isn't clipped at the top. The live affinda.com\n reference at 1280 vw renders the heading roughly 180 px below the\n viewport top — pad accordingly. (Earlier value of 80 px clipped the\n heading behind the navbar; caught by qa/regression-compare in the\n site repo.) /\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 180px;\n}\n\n/ -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- /\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/ Illustration variants use a looser two-column split so the art\n doesn't dominate. /\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n/ inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n illustration column too wide, which pinches the heading down to\n 4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n matching the live affinda.com reference. /\n:host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n / Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. /\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n / Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. /\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has()) {\n display: none;\n}\n\n.hero__badge:has() {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/ -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- /\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/ Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. /\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/ -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- /\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n/ Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n tower past the text column. 540 px matches the live treatment for\n the /industries + /integrations heroes. /\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: 540px;\n}\n\n/ -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- /\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has()) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. /\n:host(.hero--inkwell-photo) .hero__logos:has() {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- /\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n / Centered variant still needs a touch more clearance under the\n navbar pill on tablet. /\n :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 144px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid,\n :host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n / Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. /\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has() {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n \| 'inkwell-photo'\n \| 'inkwell-illustration'\n \| 'inkwell-centered'\n \| 'soft-clay-illustration'\n \| 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' \| 'loose';\n\n/*\n Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n /\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/\n Mobile blob shape — simpler D-curve matching the live mobile banner.\n /\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/\n Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n /\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' \| 'soft-clay' \| 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/\n Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n \n - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n \n ## Slots\n \n - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n \n ## Float-navbar handling\n \n When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n \n ## Image lift\n \n The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n /\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /* Layout / theme preset. See variant docs in the component header. /\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /* Heading text (use the default slot for richer markup). /\n @Prop() heading: string = '';\n\n /* Description text (use the `description` slot for richer markup). /\n @Prop() description: string = '';\n\n /\n Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n /\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /\n Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n /\n @Prop() topPad: HeroTopPad = 'default';\n\n /* Typography lockup max-width (px). Defaults to 620, matching the live site. /\n @Prop() maxWidth: number = 620;\n\n /\n Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' \|\|\n this.variant === 'inkwell-illustration' \|\|\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' \|\|\n v === 'soft-clay-illustration' \|\|\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-nav-accordion-item.entry.esm.js","sources":["src/components/af-nav-accordion-item/af-nav-accordion-item.css?tag=af-nav-accordion-item&encapsulation=scoped","src/components/af-nav-accordion-item/af-nav-accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.nav-accordion-item {\n width: 100%;\n}\n\n/* Trigger button/link - clickable header /\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n padding: 20px 12px;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n cursor: pointer;\n font: inherit;\n text-align: left;\n text-decoration: none;\n color: inherit;\n box-sizing: border-box;\n}\n\na.trigger {\n color: inherit;\n}\n\n.trigger:hover:not(:disabled) {\n background-color: rgba(20, 52, 59, 0.02);\n}\n\n.trigger:focus-visible {\n outline: 2px solid var(--af-nav-border-active, 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.trigger-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/ Label styling - matches NavItem primary-01 mobile /\n.label {\n font-family: var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/ Chevron indicator /\n.chevron,\n.chevron-button {\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-nav-item-primary, var(--af-typography-body-dark, #14343b));\n transition: transform 0.3s ease;\n}\n\n.chevron-button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n}\n\n.chevron-button:hover {\n opacity: 0.7;\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 background: var(--af-background-base, white);\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/ Mobile breakpoint styling /\n:host(.breakpoint-mobile) .trigger {\n padding: 20px 12px;\n}\n\n:host(.breakpoint-mobile) .label {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n}\n\n/ Desktop breakpoint styling /\n:host(.breakpoint-desktop) .trigger {\n padding: 12px;\n}\n\n:host(.breakpoint-desktop) .label {\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0;\n}\n\n/ Nested content uses different padding /\n:host(.breakpoint-mobile) .content {\n padding-left: 0;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/\n Navigation accordion item with NavItem-styled trigger.\n * Combines navigation item styling with accordion collapse behavior.\n * \n * @slot trigger - Custom trigger content (optional - uses label if not provided)\n * @slot - The collapsible content (typically NavMenuNest or NavMenu components)\n /\n@Component({\n tag: 'af-nav-accordion-item',\n styleUrl: 'af-nav-accordion-item.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavAccordionItem {\n @Element() el!: HTMLElement;\n\n /\n Unique identifier for this accordion item\n /\n @Prop({ reflect: true }) itemId!: string;\n\n /\n Label text for the navigation item trigger\n /\n @Prop() label?: 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\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Optional href - if provided, clicking navigates instead of expanding\n * (chevron area would still toggle expansion if both behaviors needed)\n /\n @Prop() href?: string;\n\n /\n Breakpoint for styling\n /\n @Prop({ reflect: true }) breakpoint: 'desktop' \| 'mobile' = 'mobile';\n\n /\n Emitted when the accordion item is toggled\n /\n @Event({ eventName: 'af-nav-accordion-item-toggle' }) navAccordionItemToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n @State() contentHeight: number = 0;\n @State() hasTriggerSlot: boolean = false;\n @State() hasContent: boolean = false;\n\n private contentRef?: HTMLElement;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.measureContent();\n }\n }\n\n /\n Detect whether the host has any default-slot children — i.e. whether\n * this item expands to reveal a sub-menu, or is just a simple link.\n * We check in componentWillLoad (before render) because after render\n * Stencil has appended its own output to the host and this.el.children\n * would include that.\n /\n componentWillLoad() {\n this.hasContent = Array.from(this.el.children).some(\n (child) => !(child as HTMLElement).hasAttribute('slot'),\n );\n }\n\n componentDidLoad() {\n if (this.open) {\n this.measureContent();\n }\n }\n\n /\n Programmatically toggle the accordion item\n /\n @Method()\n async toggle() {\n if (!this.disabled && !this.href) {\n this.open = !this.open;\n this.navAccordionItemToggle.emit({ itemId: this.itemId, open: this.open });\n }\n }\n\n private measureContent() {\n if (this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n }\n\n private handleTriggerClick = (event: MouseEvent) => {\n // If it's a link, let it navigate (unless they clicked the chevron specifically)\n if (this.href) {\n return;\n }\n event.preventDefault();\n this.toggle();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if ((event.key === 'Enter' \|\| event.key === ' ') && !this.href) {\n event.preventDefault();\n this.toggle();\n }\n };\n\n private handleSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasTriggerSlot = slot.assignedNodes().length > 0;\n };\n\n render() {\n const contentStyle = {\n maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n };\n\n // Only render the chevron toggle when this item actually has\n // sub-content to expand. A plain href item with no children is a\n // direct link and shouldn't show a disclosure affordance.\n const hasDropdownContent = this.hasContent;\n\n return (\n <Host \n class={{ \n 'is-open': this.open, \n 'is-disabled': this.disabled,\n [`breakpoint-${this.breakpoint}`]: true\n }}\n >\n <div class=\"nav-accordion-item\">\n {/ Trigger /}\n {this.href ? (\n <a\n href={this.href}\n class=\"trigger\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\n <button \n class=\"chevron-button\"\n onClick={(e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }}\n aria-label={this.open ? 'Collapse' : 'Expand'}\n type=\"button\"\n >\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 )}\n </a>\n ) : (\n <button\n class=\"trigger\"\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleKeyDown}\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\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\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 )}\n </button>\n )}\n\n {/ Collapsible content */}\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":"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"}
1	+ {"version":3,"file":"af-nav-accordion-item.entry.esm.js","sources":["src/components/af-nav-accordion-item/af-nav-accordion-item.css?tag=af-nav-accordion-item&encapsulation=scoped","src/components/af-nav-accordion-item/af-nav-accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.nav-accordion-item {\n width: 100%;\n}\n\n/* Trigger button/link - clickable header /\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n padding: 20px 12px;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n cursor: pointer;\n font: inherit;\n text-align: left;\n text-decoration: none;\n color: inherit;\n box-sizing: border-box;\n}\n\na.trigger {\n color: inherit;\n}\n\n.trigger:hover:not(:disabled) {\n background-color: rgba(20, 52, 59, 0.02);\n}\n\n.trigger:focus-visible {\n outline: 2px solid var(--af-nav-border-active, 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.trigger-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/ Label styling - matches NavItem primary-01 mobile /\n.label {\n font-family: var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/ Chevron indicator /\n.chevron,\n.chevron-button {\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-nav-item-primary, var(--af-typography-body-dark, #14343b));\n transition: transform var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.chevron-button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n}\n\n.chevron-button:hover {\n opacity: 0.7;\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 var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chevron,\n .chevron-button,\n .content-wrapper {\n transition-duration: 0.01ms;\n }\n}\n\n.content {\n padding: 0;\n background: var(--af-background-base, white);\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/ Mobile breakpoint styling /\n:host(.breakpoint-mobile) .trigger {\n padding: 20px 12px;\n}\n\n:host(.breakpoint-mobile) .label {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n}\n\n/ Desktop breakpoint styling /\n:host(.breakpoint-desktop) .trigger {\n padding: 12px;\n}\n\n:host(.breakpoint-desktop) .label {\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0;\n}\n\n/ Nested content uses different padding /\n:host(.breakpoint-mobile) .content {\n padding-left: 0;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/\n Navigation accordion item with NavItem-styled trigger.\n * Combines navigation item styling with accordion collapse behavior.\n * \n * @slot trigger - Custom trigger content (optional - uses label if not provided)\n * @slot - The collapsible content (typically NavMenuNest or NavMenu components)\n /\n@Component({\n tag: 'af-nav-accordion-item',\n styleUrl: 'af-nav-accordion-item.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavAccordionItem {\n @Element() el!: HTMLElement;\n\n /\n Unique identifier for this accordion item\n /\n @Prop({ reflect: true }) itemId!: string;\n\n /\n Label text for the navigation item trigger\n /\n @Prop() label?: 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\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Optional href - if provided, clicking navigates instead of expanding\n * (chevron area would still toggle expansion if both behaviors needed)\n /\n @Prop() href?: string;\n\n /\n Breakpoint for styling\n /\n @Prop({ reflect: true }) breakpoint: 'desktop' \| 'mobile' = 'mobile';\n\n /\n Emitted when the accordion item is toggled\n /\n @Event({ eventName: 'af-nav-accordion-item-toggle' }) navAccordionItemToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n @State() contentHeight: number = 0;\n @State() hasTriggerSlot: boolean = false;\n @State() hasContent: boolean = false;\n\n private contentRef?: HTMLElement;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.measureContent();\n }\n }\n\n /\n Detect whether the host has any default-slot children — i.e. whether\n * this item expands to reveal a sub-menu, or is just a simple link.\n * We check in componentWillLoad (before render) because after render\n * Stencil has appended its own output to the host and this.el.children\n * would include that.\n /\n componentWillLoad() {\n this.hasContent = Array.from(this.el.children).some(\n (child) => !(child as HTMLElement).hasAttribute('slot'),\n );\n }\n\n componentDidLoad() {\n if (this.open) {\n this.measureContent();\n }\n }\n\n /\n Programmatically toggle the accordion item\n /\n @Method()\n async toggle() {\n if (!this.disabled && !this.href) {\n this.open = !this.open;\n this.navAccordionItemToggle.emit({ itemId: this.itemId, open: this.open });\n }\n }\n\n private measureContent() {\n if (this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n }\n\n private handleTriggerClick = (event: MouseEvent) => {\n // If it's a link, let it navigate (unless they clicked the chevron specifically)\n if (this.href) {\n return;\n }\n event.preventDefault();\n this.toggle();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if ((event.key === 'Enter' \|\| event.key === ' ') && !this.href) {\n event.preventDefault();\n this.toggle();\n }\n };\n\n private handleSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasTriggerSlot = slot.assignedNodes().length > 0;\n };\n\n render() {\n const contentStyle = {\n maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n };\n\n // Only render the chevron toggle when this item actually has\n // sub-content to expand. A plain href item with no children is a\n // direct link and shouldn't show a disclosure affordance.\n const hasDropdownContent = this.hasContent;\n\n return (\n <Host \n class={{ \n 'is-open': this.open, \n 'is-disabled': this.disabled,\n [`breakpoint-${this.breakpoint}`]: true\n }}\n >\n <div class=\"nav-accordion-item\">\n {/ Trigger /}\n {this.href ? (\n <a\n href={this.href}\n class=\"trigger\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\n <button \n class=\"chevron-button\"\n onClick={(e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }}\n aria-label={this.open ? 'Collapse' : 'Expand'}\n type=\"button\"\n >\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 )}\n </a>\n ) : (\n <button\n class=\"trigger\"\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleKeyDown}\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\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\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 )}\n </button>\n )}\n\n {/ Collapsible content */}\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":"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"}

package/dist/affinda/af-stat.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-stat.entry.esm.js","sources":["src/components/af-stat/af-stat.css?tag=af-stat&encapsulation=shadow","src/components/af-stat/af-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1 1 0;\n min-width: 0;\n /* Left accent border mirrors the website's stats-row styling. Reads\n the active border colour from whatever theme the ancestor sets. /\n border-left: 2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));\n padding-left: var(--space-4, 16px);\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2, 8px);\n min-height: 76px;\n justify-content: center;\n}\n\n/ Nudge the value towards the theme's secondary heading colour for that\n gold/ochre accent on light themes — matches af-testimonial-stat. /\n.stat__value {\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/\n Individual stat — a large value (e.g. \"1B+\") paired with a descriptive label.\n \n Intended as a slotted child of `af-stats-row`, but renders standalone too.\n * Colour is inherited from the ancestor theme context (`af-section` /\n * `af-card` / `af-theme-override`) via the `--af-typography-` tokens that\n `af-heading` and `af-text` already consume — no theme prop needed here.\n /\n@Component({\n tag: 'af-stat',\n styleUrl: 'af-stat.css',\n shadow: true,\n})\nexport class AfStat {\n /* The statistic headline value (e.g. \"1B+\", \"95%\", \"10+\"). /\n @Prop() value!: string;\n\n /* Description / caption rendered beneath the value. */\n @Prop() label!: string;\n\n render() {\n return (\n <Host>\n <div class=\"stat\">\n <af-heading level=\"2\" class=\"stat__value\">{this.value}</af-heading>\n <af-text variant=\"medium\" class=\"stat__label\">{this.label}</af-text>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,~~8bAA8b~~;;~~MCenc~~,MAAM,GAAA,MAAA;;;;IAOjB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EACnE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAW,CAChE,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-stat.entry.esm.js","sources":["src/components/af-stat/af-stat.css?tag=af-stat&encapsulation=shadow","src/components/af-stat/af-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1 1 0;\n min-width: 0;\n /* Left accent border mirrors the website's stats-row styling. Reads\n the active border colour from whatever theme the ancestor sets. /\n border-left: 2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));\n padding-left: var(--space-4, 16px);\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2, 8px);\n min-height: 76px;\n justify-content: center;\n}\n\n/ Nudge the value towards the theme's secondary heading colour for that\n gold/ochre accent on light themes — matches af-testimonial-stat. /\n.stat__value {\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n / Stat values are a typographic beat — enable proportional lining\n figures and discretionary ligatures so numerals like \"1B+\" align\n on the baseline and sit at the expected optical weight. /\n font-variant-numeric: lining-nums proportional-nums;\n font-feature-settings: 'ss01', 'kern';\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/\n Individual stat — a large value (e.g. \"1B+\") paired with a descriptive label.\n \n Intended as a slotted child of `af-stats-row`, but renders standalone too.\n * Colour is inherited from the ancestor theme context (`af-section` /\n * `af-card` / `af-theme-override`) via the `--af-typography-` tokens that\n `af-heading` and `af-text` already consume — no theme prop needed here.\n /\n@Component({\n tag: 'af-stat',\n styleUrl: 'af-stat.css',\n shadow: true,\n})\nexport class AfStat {\n /* The statistic headline value (e.g. \"1B+\", \"95%\", \"10+\"). /\n @Prop() value!: string;\n\n /* Description / caption rendered beneath the value. */\n @Prop() label!: string;\n\n render() {\n return (\n <Host>\n <div class=\"stat\">\n <af-heading level=\"2\" class=\"stat__value\">{this.value}</af-heading>\n <af-text variant=\"medium\" class=\"stat__label\">{this.label}</af-text>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,shBAAshB;;MCe3hB,MAAM,GAAA,MAAA;;;;IAOjB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EACnE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAW,CAChE,CACD;;;;;;;"}

package/dist/affinda/af-testimonial-stat.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-testimonial-stat.entry.esm.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat--accent {\n /* Themed active/accent border color /\n border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n padding-left: 16px;\n min-height: 76px;\n justify-content: center;\n}\n\n/ Stat value - override af-heading to use secondary color /\n.stat-value {\n / Override the heading color to use secondary (gold/ochre) instead of primary /\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n}\n\n/ Description - override af-text to use body-dark for emphasis /\n.stat-description {\n --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-testimonial-stat',\n styleUrl: 'af-testimonial-stat.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialStat {\n /\n The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n /\n @Prop() value!: string;\n\n /\n Description text for the statistic\n /\n @Prop() description!: string;\n\n /\n Whether to show left accent border\n /\n @Prop() accentBorder: boolean = false;\n\n render() {\n return (\n <Host>\n <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n {/ Stat value uses secondary heading color via CSS override /}\n <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n {/ Description uses af-text for proper theming */}\n <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG~~,+qBAA+qB~~;;~~MCQ/rB~~,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AActC;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA,EAE3D,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EAElE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAW,CAC3E,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-testimonial-stat.entry.esm.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat--accent {\n /* Themed active/accent border color /\n border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n padding-left: 16px;\n min-height: 76px;\n justify-content: center;\n}\n\n/ Stat value - override af-heading to use secondary color /\n.stat-value {\n / Override the heading color to use secondary (gold/ochre) instead of primary /\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n / Lining figures so \"1B+\" / \"95%\" hit a consistent baseline and\n optical weight, matching af-stat. /\n font-variant-numeric: lining-nums proportional-nums;\n font-feature-settings: 'ss01', 'kern';\n}\n\n/ Description - override af-text to use body-dark for emphasis /\n.stat-description {\n --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-testimonial-stat',\n styleUrl: 'af-testimonial-stat.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialStat {\n /\n The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n /\n @Prop() value!: string;\n\n /\n Description text for the statistic\n /\n @Prop() description!: string;\n\n /\n Whether to show left accent border\n /\n @Prop() accentBorder: boolean = false;\n\n render() {\n return (\n <Host>\n <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n {/ Stat value uses secondary heading color via CSS override /}\n <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n {/ Description uses af-text for proper theming */}\n <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,uwBAAuwB;;MCQvxB,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AActC;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA,EAE3D,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EAElE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAW,CAC3E,CACD;;;;;;;"}

package/dist/affinda/affinda.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--colour-brand-mist-green:#C6D5D1;--colour-brand-inkwell:#14343B;--colour-brand-soft-clay:#B09670;--colour-brand-white:#FFFFFF;--colour-brand-ivory-paper:#FFF9EE;--colour-brand-azure:#7FE2D4;--colour-brand-ice:#A6FFF8;--colour-tints-mist-green-50:#f9fbfa;--colour-mistgreen-50:#f9fbfa;--colour-tints-mist-green-100:#f4f7f6;--colour-mistgreen-100:#f4f7f6;--colour-tints-mist-green-200:#e8eeed;--colour-mistgreen-200:#e8eeed;--colour-tints-mist-green-300:#dde6e3;--colour-mistgreen-300:#dde6e3;--colour-tints-mist-green-400:#d1ddda;--colour-mistgreen-400:#d1ddda;--colour-tints-mist-green-500:#c6d5d1;--colour-mistgreen-500:#c6d5d1;--colour-tints-mist-green-600:#b2c0bc;--colour-mistgreen-600:#b2c0bc;--colour-tints-mist-green-700:#9eaaa7;--colour-mistgreen-700:#9eaaa7;--colour-tints-inkwell-20:#f9fafa;--colour-inkwell-20:#f9fafa;--colour-tints-inkwell-30:#f3f5f5;--colour-inkwell-30:#f3f5f5;--colour-tints-inkwell-40:#edf0f0;--colour-inkwell-40:#edf0f0;--colour-tints-inkwell-50:#e8ebeb;--colour-inkwell-50:#e8ebeb;--colour-tints-inkwell-100:#d0d6d8;--colour-inkwell-100:#d0d6d8;--colour-tints-inkwell-200:#a1aeb1;--colour-inkwell-200:#a1aeb1;--colour-tints-inkwell-300:#728589;--colour-inkwell-300:#728589;--colour-tints-inkwell-350:#60767b;--colour-inkwell-350:#60767b;--colour-tints-inkwell-400:#2b484f;--colour-inkwell-400:#2b484f;--colour-tints-inkwell-450:#203e45;--colour-inkwell-450:#203e45;--colour-tints-inkwell-500:#14343b;--colour-inkwell-500:#14343b;--colour-tints-inkwell-600:#102a2f;--colour-inkwell-600:#102a2f;--colour-tints-inkwell-700:#102a2f;--colour-inkwell-700:#102a2f;--colour-tints-soft-clay-50:#f7f5f1;--colour-softclay-50:#f7f5f1;--colour-tints-soft-clay-100:#efeae2;--colour-softclay-100:#efeae2;--colour-tints-soft-clay-200:#dfd5c6;--colour-softclay-200:#dfd5c6;--colour-tints-soft-clay-300:#d0c0a9;--colour-softclay-300:#d0c0a9;--colour-tints-soft-clay-400:#c0ab8d;--colour-softclay-400:#c0ab8d;--colour-tints-soft-clay-500:#b09670;--colour-softclay-500:#b09670;--colour-tints-soft-clay-600:#9e8765;--colour-softclay-600:#9e8765;--colour-tints-soft-clay-700:#8d785a;--colour-softclay-700:#8d785a;--colour-tints-soft-clay-800:#8a7049;--colour-softclay-800:#8a7049;--colour-tints-ice-50:#f6ffff;--colour-ice-50:#f6ffff;--colour-tints-ice-100:#edfffe;--colour-ice-100:#edfffe;--colour-tints-ice-200:#dbfffd;--colour-ice-200:#dbfffd;--colour-tints-ice-300:#cafffd;--colour-ice-300:#cafffd;--colour-tints-ice-400:#b8fffc;--colour-ice-400:#b8fffc;--colour-tints-ice-500:#a6fffb;--colour-ice-500:#a6fffb;--colour-tints-ice-600:#95e6e2;--colour-ice-600:#95e6e2;--colour-tints-ice-700:#85ccc9;--colour-ice-700:#85ccc9;--colour-typography-heading-primary:#14343B;--colour-typography-heading-secondary:#B09670;--colour-typography-body-dark:#14343B;--colour-typography-body-default:#14343B;--colour-typography-body-subtle:#708380;--colour-background-mist-green:#C6D5D1;--colour-background-inkwell:#14343B;--colour-background-soft-clay:#B09670;--colour-background-white:#FFFFFF;--colour-background-ivory-paper:#FFF9EE;--colour-background-level1:#E8EEED;--colour-ui-mist-green:#C6D5D1;--colour-ui-inkwell:#14343B;--colour-ui-soft-clay:#B09670;--colour-ui-white:#FFFFFF;--colour-ui-ivory-paper:#FFF9EE;--colour-ui-azure:#7FE2D4;--colour-ui-ice:#A6FFF8;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;--shadow-sm:0 1px 2px rgba(20, 52, 59, 0.08);--shadow-md:1px 2px 4px rgba(20, 52, 59, 0.2);--shadow-navbar:0 4px 24px rgba(20, 52, 59, 0.12);--status-ok:#3E8F6E;--status-issue:#B94A3B;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--typography-headingfont:'NeuSans', Arial, sans-serif;--typography-bodyfont:'NeuSans', Arial, sans-serif;--typography-sansfont:'NeuSans', Arial, sans-serif;--font-weight-regular:400;--font-weight-book:500;--font-weight-semibold:600;--font-size-heading-1-desktop:56px;--font-size-heading-1-mobile:38px;--font-size-heading-2-desktop:44px;--font-size-heading-2-mobile:32px;--font-size-heading-3-desktop:34px;--font-size-heading-3-mobile:25px;--font-size-heading-4-desktop:24px;--font-size-heading-4-mobile:20px;--font-size-heading-5-desktop:20px;--font-size-heading-5-mobile:18px;--font-size-heading-xl-desktop:80px;--font-size-heading-xl-mobile:50px;--font-size-heading-card-desktop:22px;--font-size-heading-card-mobile:20px;--font-size-body-xlarge:22px;--font-size-body-large:18px;--font-size-body-medium:16px;--font-size-body-small:14px;--font-size-label-button:17px;--font-size-label-tag:14px;--line-height-heading-3:38px;--line-height-heading-4:30px;--line-height-heading-5:24px;--line-height-heading-tight:1;--line-height-heading-normal:1.1;--line-height-heading-relaxed:1.2;--line-height-heading-card:28px;--line-height-body-xlarge:28px;--line-height-body-large:26px;--line-height-body-medium:24px;--line-height-body-small:20px;--line-height-label-button:20px;--line-height-label-tag:1;--letter-spacing-heading:-0.02em;--letter-spacing-body:0;--grid-xlarge-breakpoint:1440px;--grid-xlarge-columns:12;--grid-xlarge-margin:80px;--grid-xlarge-gutter:24px;--grid-xlarge-max-width:1440px;--grid-large-breakpoint:1024px;--grid-large-columns:12;--grid-large-margin:64px;--grid-large-gutter:16px;--grid-large-max-width:1024px;--grid-medium-breakpoint:768px;--grid-medium-columns:6;--grid-medium-margin:32px;--grid-medium-gutter:16px;--grid-medium-max-width:768px;--grid-small-breakpoint:375px;--grid-small-columns:4;--grid-small-margin:20px;--grid-small-gutter:16px;--grid-small-max-width:100%;--grid-xsmall-breakpoint:320px;--grid-xsmall-columns:4;--grid-xsmall-margin:16px;--grid-xsmall-gutter:16px;--grid-xsmall-max-width:100%;--icon-size-small:16px;--icon-size-medium:24px;--icon-size-large:32px;--icon-badge-size:48px;--illustration-size:432px}
1	+ :root{--colour-brand-mist-green:#C6D5D1;--colour-brand-inkwell:#14343B;--colour-brand-soft-clay:#B09670;--colour-brand-white:#FFFFFF;--colour-brand-ivory-paper:#FFF9EE;--colour-brand-azure:#7FE2D4;--colour-brand-ice:#A6FFF8;--colour-tints-mist-green-50:#f9fbfa;--colour-mistgreen-50:#f9fbfa;--colour-tints-mist-green-100:#f4f7f6;--colour-mistgreen-100:#f4f7f6;--colour-tints-mist-green-200:#e8eeed;--colour-mistgreen-200:#e8eeed;--colour-tints-mist-green-300:#dde6e3;--colour-mistgreen-300:#dde6e3;--colour-tints-mist-green-400:#d1ddda;--colour-mistgreen-400:#d1ddda;--colour-tints-mist-green-500:#c6d5d1;--colour-mistgreen-500:#c6d5d1;--colour-tints-mist-green-600:#b2c0bc;--colour-mistgreen-600:#b2c0bc;--colour-tints-mist-green-700:#9eaaa7;--colour-mistgreen-700:#9eaaa7;--colour-tints-inkwell-20:#f9fafa;--colour-inkwell-20:#f9fafa;--colour-tints-inkwell-30:#f3f5f5;--colour-inkwell-30:#f3f5f5;--colour-tints-inkwell-40:#edf0f0;--colour-inkwell-40:#edf0f0;--colour-tints-inkwell-50:#e8ebeb;--colour-inkwell-50:#e8ebeb;--colour-tints-inkwell-100:#d0d6d8;--colour-inkwell-100:#d0d6d8;--colour-tints-inkwell-200:#a1aeb1;--colour-inkwell-200:#a1aeb1;--colour-tints-inkwell-300:#728589;--colour-inkwell-300:#728589;--colour-tints-inkwell-350:#60767b;--colour-inkwell-350:#60767b;--colour-tints-inkwell-400:#2b484f;--colour-inkwell-400:#2b484f;--colour-tints-inkwell-450:#203e45;--colour-inkwell-450:#203e45;--colour-tints-inkwell-500:#14343b;--colour-inkwell-500:#14343b;--colour-tints-inkwell-600:#102a2f;--colour-inkwell-600:#102a2f;--colour-tints-inkwell-700:#102a2f;--colour-inkwell-700:#102a2f;--colour-tints-soft-clay-50:#f7f5f1;--colour-softclay-50:#f7f5f1;--colour-tints-soft-clay-100:#efeae2;--colour-softclay-100:#efeae2;--colour-tints-soft-clay-200:#dfd5c6;--colour-softclay-200:#dfd5c6;--colour-tints-soft-clay-300:#d0c0a9;--colour-softclay-300:#d0c0a9;--colour-tints-soft-clay-400:#c0ab8d;--colour-softclay-400:#c0ab8d;--colour-tints-soft-clay-500:#b09670;--colour-softclay-500:#b09670;--colour-tints-soft-clay-600:#9e8765;--colour-softclay-600:#9e8765;--colour-tints-soft-clay-700:#8d785a;--colour-softclay-700:#8d785a;--colour-tints-soft-clay-800:#8a7049;--colour-softclay-800:#8a7049;--colour-tints-ice-50:#f6ffff;--colour-ice-50:#f6ffff;--colour-tints-ice-100:#edfffe;--colour-ice-100:#edfffe;--colour-tints-ice-200:#dbfffd;--colour-ice-200:#dbfffd;--colour-tints-ice-300:#cafffd;--colour-ice-300:#cafffd;--colour-tints-ice-400:#b8fffc;--colour-ice-400:#b8fffc;--colour-tints-ice-500:#a6fffb;--colour-ice-500:#a6fffb;--colour-tints-ice-600:#95e6e2;--colour-ice-600:#95e6e2;--colour-tints-ice-700:#85ccc9;--colour-ice-700:#85ccc9;--colour-typography-heading-primary:#14343B;--colour-typography-heading-secondary:#B09670;--colour-typography-body-dark:#14343B;--colour-typography-body-default:#14343B;--colour-typography-body-subtle:#708380;--colour-background-mist-green:#C6D5D1;--colour-background-inkwell:#14343B;--colour-background-soft-clay:#B09670;--colour-background-white:#FFFFFF;--colour-background-ivory-paper:#FFF9EE;--colour-background-level1:#E8EEED;--colour-ui-mist-green:#C6D5D1;--colour-ui-inkwell:#14343B;--colour-ui-soft-clay:#B09670;--colour-ui-white:#FFFFFF;--colour-ui-ivory-paper:#FFF9EE;--colour-ui-azure:#7FE2D4;--colour-ui-ice:#A6FFF8;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;--shadow-sm:0 1px 2px rgba(20, 52, 59, 0.08);--shadow-md:1px 2px 4px rgba(20, 52, 59, 0.2);--shadow-lift:0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08);--shadow-navbar:0 4px 24px rgba(20, 52, 59, 0.12);--status-ok:#3E8F6E;--status-issue:#B94A3B;--motion-duration-fast:150ms;--motion-duration-base:200ms;--motion-duration-slow:300ms;--motion-easing-standard:cubic-bezier(0.4, 0, 0.2, 1);--motion-easing-emphasized:cubic-bezier(0.2, 0, 0, 1);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--typography-headingfont:'NeuSans', Arial, sans-serif;--typography-bodyfont:'NeuSans', Arial, sans-serif;--typography-sansfont:'NeuSans', Arial, sans-serif;--font-weight-regular:400;--font-weight-book:500;--font-weight-semibold:600;--font-size-heading-1-desktop:56px;--font-size-heading-1-mobile:38px;--font-size-heading-2-desktop:44px;--font-size-heading-2-mobile:32px;--font-size-heading-3-desktop:34px;--font-size-heading-3-mobile:25px;--font-size-heading-4-desktop:24px;--font-size-heading-4-mobile:20px;--font-size-heading-5-desktop:20px;--font-size-heading-5-mobile:18px;--font-size-heading-xl-desktop:80px;--font-size-heading-xl-mobile:50px;--font-size-heading-card-desktop:22px;--font-size-heading-card-mobile:20px;--font-size-body-xlarge:22px;--font-size-body-large:18px;--font-size-body-medium:16px;--font-size-body-small:14px;--font-size-label-button:17px;--font-size-label-tag:14px;--line-height-heading-3:38px;--line-height-heading-4:30px;--line-height-heading-5:24px;--line-height-heading-tight:1;--line-height-heading-normal:1.1;--line-height-heading-relaxed:1.2;--line-height-heading-card:28px;--line-height-body-xlarge:28px;--line-height-body-large:26px;--line-height-body-medium:24px;--line-height-body-small:20px;--line-height-label-button:20px;--line-height-label-tag:1;--letter-spacing-heading:-0.02em;--letter-spacing-body:0;--grid-xlarge-breakpoint:1440px;--grid-xlarge-columns:12;--grid-xlarge-margin:80px;--grid-xlarge-gutter:24px;--grid-xlarge-max-width:1440px;--grid-large-breakpoint:1024px;--grid-large-columns:12;--grid-large-margin:64px;--grid-large-gutter:16px;--grid-large-max-width:1024px;--grid-medium-breakpoint:768px;--grid-medium-columns:6;--grid-medium-margin:32px;--grid-medium-gutter:16px;--grid-medium-max-width:768px;--grid-small-breakpoint:375px;--grid-small-columns:4;--grid-small-margin:20px;--grid-small-gutter:16px;--grid-small-max-width:100%;--grid-xsmall-breakpoint:320px;--grid-xsmall-columns:4;--grid-xsmall-margin:16px;--grid-xsmall-gutter:16px;--grid-xsmall-max-width:100%;--icon-size-small:16px;--icon-size-medium:24px;--icon-size-large:32px;--icon-badge-size:48px;--illustration-size:432px}