npm - @affinda/wc - Versions diffs - 0.1.0 → 0.2.0 - Mend

@affinda/wc 0.1.0 → 0.2.0

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 (470) hide show

package/dist/components/af-grid.js.map CHANGED Viewed

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

package/dist/components/af-hero.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface AfHero extends Components.AfHero, HTMLElement {}
+export const AfHero: {
+    prototype: AfHero;
+    new (): AfHero;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-hero.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { A as AfHero$1, d as defineCustomElement$1 } from './p-CRnEuh5f.js';
+const AfHero = AfHero$1;
+const defineCustomElement = defineCustomElement$1;
+export { AfHero, defineCustomElement };
+//# sourceMappingURL=af-hero.js.map
+//# sourceMappingURL=af-hero.js.map

package/dist/components/af-hero.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"af-hero.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-icon-box.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { A as AfIconBox$1, d as defineCustomElement$1 } from './p-i_6TLQJ5.js';
+import { A as AfIconBox$1, d as defineCustomElement$1 } from './p-nA3Uvhwb.js';
 const AfIconBox = AfIconBox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-icon-text.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 import { d as defineCustomElement$4 } from './p-B_OoX__z.js';
-import { d as defineCustomElement$3 } from './p-i_6TLQJ5.js';
-import { d as defineCustomElement$2 } from './p-DNeNJhuM.js';
+import { d as defineCustomElement$3 } from './p-nA3Uvhwb.js';
+import { d as defineCustomElement$2 } from './p-ClZAZSzR.js';
 const afIconTextCss = ".sc-af-icon-text-h{display:block}.icon-text.sc-af-icon-text{display:flex;width:100%}.icon-text--vertical.sc-af-icon-text{flex-direction:column;gap:24px;align-items:flex-start}.icon-text--horizontal.sc-af-icon-text{flex-direction:row;gap:20px;align-items:flex-start}.icon-text__icon.sc-af-icon-text{flex-shrink:0}.icon-text__lockup.sc-af-icon-text{flex:1;min-width:0}@media (max-width: 768px){.icon-text--vertical.sc-af-icon-text{gap:20px}.icon-text--horizontal.sc-af-icon-text{gap:16px}}";
@@ -31,7 +31,7 @@ const AfIconText$1 = /*@__PURE__*/ proxyCustomElement(class AfIconText extends H
             'icon-text': true,
             [`icon-text--${this.orientation}`]: true,
         };
-        return (h(Host, { key: '5ee5ddd91804507b0e4029adeee9eebb687448d9' }, h("div", { key: '5c00e4451c12aeaf924c2d9dff3ad85cb5555813', class: containerClasses }, h("af-icon-box", { key: 'd375fa1087651f86fd778744c276bd92e387b297', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: '2be428ff1b3210972248ef741086d96eb6829cb9', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: '0da48d34ee2d1ab77c2aac80daffdbce4b2774b1' }), h("span", { key: '140db3a089b16211db54b67b786a90795dbe3d8a', slot: "description" }, h("slot", { key: '37d6b87dc348b95c5178e9a04e902f04664a0feb', name: "description" })), h("span", { key: '10031a47ef045d9ad95cb1bb90289fa1d599bc35', slot: "buttons" }, h("slot", { key: 'decf43947df87a58f42d10ba5025e9c6e1149ca2', name: "buttons" }))))));
+        return (h(Host, { key: '439c52c428eb8bdd4a1d89143a3e1f3b1f1ae272' }, h("div", { key: 'ff0edf1e55f225abc3a31e928d08388cae6209e2', class: containerClasses }, h("af-icon-box", { key: '8a88ed7babd257ce508c90139b3d431b80aa9d32', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: 'b1d4722558f9f27daccfeb7e5efe954f0af3ece0', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: '02ab65533f8d40c24b46082271b06c7acac914db' }), h("span", { key: '3d0556c8b0f5b3d262c44efcb271541d74f46535', slot: "description" }, h("slot", { key: '155f5bfba6ac9a9e58ba3b4bec1d736b995c327d', name: "description" })), h("span", { key: '8fb65696a03bed3776953fc1b51c077b12030837', slot: "buttons" }, h("slot", { key: 'bc30a8813ec47e8a265282f841e30bbabfe1f06f', name: "buttons" }))))));
     }
     static get style() { return afIconTextCss; }
 }, [262, "af-icon-text", {

package/dist/components/af-illustrated-card.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { A as AfIllustratedCard$1, d as defineCustomElement$1 } from './p-C6-JATRR.js';
+import { A as AfIllustratedCard$1, d as defineCustomElement$1 } from './p-3Gzh4deR.js';
 const AfIllustratedCard = AfIllustratedCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-image.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { A as AfImage$1, d as defineCustomElement$1 } from './p-Bh6Cfgtj.js';
+import { A as AfImage$1, d as defineCustomElement$1 } from './p-LRPXnaSx.js';
 const AfImage = AfImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-in-page-banner.js CHANGED Viewed

@@ -40,7 +40,7 @@ const AfInPageBanner$1 = /*@__PURE__*/ proxyCustomElement(class AfInPageBanner e
         return (h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, h("path", { d: "M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z", fill: "currentColor" }))));
     }
     render() {
-        return (h(Host, { key: '1f14f0d7df4f632817b7e8c955b8249a5a3d2ce4' }, h("div", { key: '0fc90536d6d5b65912fca02d3c74019bee067133', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: 'c70ea65d7536efbceb8fc3f2e6d714d56c2d5be9', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'c209db43fd9a559854b73268f7b8a19b7c1a3268', class: "banner__content" }, h("div", { key: '7b1898662500a54e7dbf500646017f43ffe21e23', class: "banner__copy" }, h("h2", { key: '443078b848ee5ca1725ab960fc844e0f5d106ef7', class: "banner__heading" }, h("slot", { key: '10ce17b8014571ec6bc61cbda03b3881f2741215', name: "heading" }, this.heading)), h("div", { key: '3c43d4d4dd4c4c708891fdd3398de996a7b08d04', class: "banner__description" }, h("slot", { key: 'd58a7f5d4bea7dc2e4ce1dee10a99f19753427b4', name: "description" }, this.description))), h("div", { key: 'c10df7f70cb8ac0dd0d5e63e34a6fbc8fef9c62f', class: "banner__buttons" }, h("slot", { key: 'ff5cf411dee854f14fdbecda0bc8aac4b01b4abf', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: 'c8da6aa83a13a9b8a7e892de29b1914aa5ae41c1', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: '42b8ba18fa9d15539ab2c80af98da504d8b14013', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (h(Host, { key: '6bea21791ecb2e68e63a757f5ecfdaa1f07b728d' }, h("div", { key: '2c5afc83dcdc9917ae0542d81c1de02abfdd90a6', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '8c646d4ea9d08a3a1c1bed729d09503cd7257ece', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '77afe16ba80d1568869ab4a24dc75a65c49dab90', class: "banner__content" }, h("div", { key: 'dce08d53d206a7ccd358da11d337330dcf269d52', class: "banner__copy" }, h("h2", { key: '626df9e5fcbb345ff1f477191203343db10f2e52', class: "banner__heading" }, h("slot", { key: '5e6daf16162dffb58d9e4c61e91d226ba5fc35e7', name: "heading" }, this.heading)), h("div", { key: 'ef9dab42d2a03f3d7fdf0b8a4aed1bac5f104795', class: "banner__description" }, h("slot", { key: '3a4b3c7c474f00375c6ac49653713dec61f2a6f5', name: "description" }, this.description))), h("div", { key: 'af2f8c614c803b272fcac1ae83cbc3f3de908a4d', class: "banner__buttons" }, h("slot", { key: 'b047769e0807ad1915e28b174ef6122969ab52c6', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: '46d8a79deb045a8ba2baf1625583f181af576157', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'dde5d455151eac0b5abd2c45e920a1c45155145d', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
     static get style() { return afInPageBannerCss; }
 }, [262, "af-in-page-banner", {

package/dist/components/af-in-page-banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"af-in-page-banner.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,k1LAAk1L;;MC4C/1LA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAN3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAK,CAAA,KAAA,GAAgB,YAAY;;AAGjC,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;;AAGxB,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;;AAG9B,QAAA,IAAmB,CAAA,mBAAA,GAAW,EAAE;;AAGhC,QAAA,IAAkB,CAAA,kBAAA,GAAW,GAAG;AAExC;;;AAGG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;;AAG5B,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;AA4E3C;AA1EC;;;;AAIG;IACK,iBAAiB,GAAA;QACvB,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,iBAAa,MAAM,EAAA,EAClD,CAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB,EAAA,EAExB,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,EACnB,CAAA,CACE,CACF;;IAIV,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,gBAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAGpD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,IACnB,WACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,EACd,CAAA,KAEF,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAClC,CACG,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACvC,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,iBAAiB,KACrB,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,EAAA,EACtD,IAAI,CAAC,iBAAiB,CACb,CACb,EACA,IAAI,CAAC,mBAAmB,KACvB,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,EAC1D,EAAA,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfInPageBanner","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Banner Container\n\n Design specs from Figma:\n - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n - Border radius: radius-lg (20px) — aligned with af-card across the token ladder\n - Content padding vertical: 48px (margins/margin TB tight)\n ========================================================================== /\n\n.banner {\n position: relative;\n display: flex;\n align-items: center;\n gap: 40px;\n padding-left: 40px;\n padding-right: 148px;\n padding-top: 0;\n padding-bottom: 0;\n border-radius: var(--radius-lg, 20px);\n overflow: hidden;\n max-width: 1280px;\n width: 100%;\n}\n\n/ ==========================================================================\n Theme Variants - Background Colors\n \n Colors from Figma:\n - mist-green: #c6d5d1 (background/base)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - soft-clay: #c0ab8d (softclay-400)\n - white-ivory: #fff9ee (background/ivory-paper)\n ========================================================================== /\n\n.banner.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n / Buttons - ice primary, inkwell secondary /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n / Typography - light colors on dark background /\n --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n \n / Buttons - ice primary, white secondary /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-450, #203e45);\n \n / Buttons /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n / Buttons /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/ ==========================================================================\n Decorative Wave Overlay\n \n Figma specs:\n - Position: bottom -17.41px, right -156px\n - Size: 521px x 323px\n - Fill colors per theme\n ========================================================================== /\n\n.banner__wave-overlay {\n position: absolute;\n bottom: -17px;\n right: -156px;\n width: 521px;\n height: 323px;\n pointer-events: none;\n z-index: 0;\n}\n\n.banner__wave-svg {\n width: 100%;\n height: 100%;\n}\n\n/ ==========================================================================\n Theme-specific Wave Colors\n The SVG uses currentColor, so we set color on the overlay container.\n ========================================================================== /\n\n.banner.theme-mist-green .banner__wave-overlay {\n color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.04);\n}\n\n/ ==========================================================================\n Illustration Area\n \n Figma specs:\n - Desktop: max 360px x 360px, aspect ratio preserved\n - Mobile: 212px x 212px, positioned absolute top-right\n ========================================================================== /\n\n.banner__illustration {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 288px;\n height: 288px;\n max-width: 288px;\n max-height: 288px;\n aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/ Allow slotted content to fill the illustration area /\n.banner__illustration ::slotted() {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/* ==========================================================================\n Content Area (Typography Lockup)\n \n Figma specs:\n - Vertical padding: 48px (margins/margin TB tight)\n - Gap between copy and buttons: 40px\n - Gap between heading and description: 16px\n - Max-width for copy: 840px\n ========================================================================== /\n\n.banner__content {\n position: relative;\n z-index: 1;\n flex: 1 1 0;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n gap: 40px;\n padding-top: 38px;\n padding-bottom: 38px;\n padding-right: 0;\n padding-left: 0;\n}\n\n.banner__copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 840px;\n width: 100%;\n white-space: normal;\n}\n\n/ ==========================================================================\n Heading\n \n Figma specs:\n - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n ========================================================================== /\n\n.banner__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 44px;\n line-height: 1;\n letter-spacing: -0.88px;\n color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n margin: 0;\n white-space: normal;\n}\n\n/ ==========================================================================\n Description\n \n Figma specs:\n - Font size: 18px\n - Line height: 26px\n - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n - Color: typography/body-default #2b484f (or theme variant)\n ========================================================================== /\n\n.banner__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-bodyweight, 400);\n font-size: 18px;\n line-height: 26px;\n color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n margin: 0;\n white-space: normal;\n}\n\n/ ==========================================================================\n Button Group\n \n Figma specs:\n - Desktop: horizontal, gap 12px\n - Mobile: vertical, full-width buttons, gap 12px\n - Button padding: 24px horizontal, 12px vertical\n - Button border-radius: 9999px (radii/button)\n ========================================================================== /\n\n.banner__buttons {\n display: flex;\n flex-direction: row;\n gap: 24px;\n align-items: flex-start;\n}\n\n/ ==========================================================================\n Mobile Responsive Styles (≤768px)\n \n Figma mobile specs:\n - Width: 100%\n - Border radius: 24px\n - Padding top: 224px (space for illustration)\n - Content padding: pb 48px, pt 16px, px 28px\n - Content min-height: 320px\n - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n ========================================================================== /\n\n/ mobile-only /\n@media (max-width: 768px) {\n .banner {\n flex-direction: column;\n align-items: stretch;\n padding: 224px 0 0 0;\n / Mobile keeps the same 20px corner as desktop — simpler after the\n * token ladder consolidation. /\n border-radius: var(--radius-lg, 20px);\n max-width: 100%;\n min-height: auto;\n }\n\n / Wave overlay hidden on mobile /\n .banner__wave-overlay {\n display: none;\n }\n\n / Illustration positioned at top-right on mobile /\n .banner__illustration {\n position: absolute;\n top: 12px;\n left: auto;\n right: 0;\n transform: none;\n width: 212px;\n height: 212px;\n max-width: 280px;\n max-height: 280px;\n }\n\n / Content takes full width with min-height /\n .banner__content {\n width: 100%;\n min-height: 320px;\n padding: 16px 28px 48px 28px;\n gap: 40px;\n flex: none;\n }\n\n / Ensure copy section doesn't constrain width on mobile /\n .banner__copy {\n max-width: 100%;\n }\n\n / Mobile heading size /\n .banner__heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n }\n\n / Buttons stack vertically on mobile, full width /\n .banner__buttons {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n width: 100%;\n }\n\n / Ensure af-button takes full width on mobile /\n .banner__buttons {\n --af-button-width: 100%;\n }\n\n .banner__buttons af-button {\n display: block;\n width: 100%;\n }\n}\n\n/ ==========================================================================\n Small Mobile (≤480px)\n ========================================================================== /\n\n/ ≤ small /\n@media (max-width: 480px) {\n .banner {\n padding-top: 200px;\n }\n\n .banner__illustration {\n / Keep right-aligned, just adjust size /\n right: 0;\n width: 180px;\n height: 180px;\n }\n\n .banner__content {\n padding: 16px 20px 36px 20px;\n min-height: 280px;\n }\n\n .banner__heading {\n font-size: 28px;\n letter-spacing: -0.56px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' \| 'mist-green' \| 'soft-clay' \| 'inkwell';\n\n/\n In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * Illustration Usage:\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n * theme=\"inkwell\"\n * illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n * ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n \n Slot-based composition (preferred for rich content):\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n * props; use when you need ghost variants, more than two buttons, or\n * per-button icons).\n * - `illustration` — custom illustration markup.\n \n The string props remain supported for simple cases.\n /\n@Component({\n tag: 'af-in-page-banner',\n styleUrl: 'af-in-page-banner.css',\n shadow: false,\n scoped: true,\n})\nexport class AfInPageBanner {\n /* Theme - sets the banner background color and typography colors /\n @Prop() theme: BannerTheme = 'mist-green';\n\n /* Banner heading /\n @Prop() heading: string = '';\n\n /* Banner description /\n @Prop() description: string = '';\n\n /* Primary button text /\n @Prop() primaryButtonText: string = '';\n\n /* Primary button URL /\n @Prop() primaryButtonUrl: string = '#';\n\n /* Secondary button text (optional - if empty, button won't show) /\n @Prop() secondaryButtonText: string = '';\n\n /* Secondary button URL /\n @Prop() secondaryButtonUrl: string = '#';\n\n /* \n * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n * from @affinda/illustrations in your app code.\n /\n @Prop() illustrationUrl: string = '';\n\n /* Whether to show the decorative wave overlay /\n @Prop() showWaveDecoration: boolean = true;\n\n /\n Renders the decorative wave SVG overlay.\n * Uses the Affinda brand \"infinity loop\" wave pattern.\n * Fill color is controlled via CSS custom properties per theme.\n /\n private renderWaveOverlay() {\n return (\n <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n <svg \n viewBox=\"0 0 521 323\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"banner__wave-svg\"\n >\n <path \n d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class={`banner theme-${this.theme}`}>\n {/ Decorative wave overlay /}\n {this.showWaveDecoration && this.renderWaveOverlay()}\n\n {/ Illustration area /}\n <div class=\"banner__illustration\">\n {this.illustrationUrl ? (\n <img \n src={this.illustrationUrl} \n alt=\"\" \n class=\"banner__illustration-img\" \n loading=\"lazy\"\n />\n ) : (\n <slot name=\"illustration\"></slot>\n )}\n </div>\n\n {/ Content area — slots take precedence over string props. */}\n <div class=\"banner__content\">\n <div class=\"banner__copy\">\n <h2 class=\"banner__heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </h2>\n <div class=\"banner__description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n </div>\n\n <div class=\"banner__buttons\">\n <slot name=\"buttons\">\n {this.primaryButtonText && (\n <af-button href={this.primaryButtonUrl} variant=\"primary\">\n {this.primaryButtonText}\n </af-button>\n )}\n {this.secondaryButtonText && (\n <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n {this.secondaryButtonText}\n </af-button>\n )}\n </slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"af-in-page-banner.js","mappings":"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","names":["AfInPageBanner","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Banner Container\n\n Design specs from Figma:\n - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n - Border radius: radius-lg (20px) — aligned with af-card across the token ladder\n - Content padding vertical: 48px (margins/margin TB tight)\n ========================================================================== /\n\n.banner {\n position: relative;\n display: flex;\n align-items: center;\n gap: 40px;\n padding-left: 40px;\n padding-right: 148px;\n padding-top: 0;\n padding-bottom: 0;\n border-radius: var(--radius-lg, 20px);\n overflow: hidden;\n max-width: 1280px;\n width: 100%;\n}\n\n/ ==========================================================================\n Theme Variants - Background Colors\n \n Colors from Figma:\n - mist-green: #c6d5d1 (background/base)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - soft-clay: #c0ab8d (softclay-400)\n - white-ivory: #fff9ee (background/ivory-paper)\n ========================================================================== /\n\n.banner.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n / Buttons - ice primary, inkwell secondary /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n / Typography - light colors on dark background /\n --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n \n / Buttons - ice primary, white secondary /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-450, #203e45);\n \n / Buttons /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n / Buttons /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/ ==========================================================================\n Decorative Wave Overlay\n \n Figma specs:\n - Position: bottom -17.41px, right -156px\n - Size: 521px x 323px\n - Fill colors per theme\n ========================================================================== /\n\n.banner__wave-overlay {\n position: absolute;\n bottom: -17px;\n right: -156px;\n width: 521px;\n height: 323px;\n pointer-events: none;\n z-index: 0;\n}\n\n.banner__wave-svg {\n width: 100%;\n height: 100%;\n}\n\n/ ==========================================================================\n Theme-specific Wave Colors\n The SVG uses currentColor, so we set color on the overlay container.\n ========================================================================== /\n\n.banner.theme-mist-green .banner__wave-overlay {\n color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.04);\n}\n\n/ ==========================================================================\n Illustration Area\n \n Figma specs:\n - Desktop: max 360px x 360px, aspect ratio preserved\n - Mobile: 212px x 212px, positioned absolute top-right\n ========================================================================== /\n\n.banner__illustration {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 288px;\n height: 288px;\n max-width: 288px;\n max-height: 288px;\n aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/ Allow slotted content to fill the illustration area /\n.banner__illustration ::slotted() {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/* ==========================================================================\n Content Area (Typography Lockup)\n \n Figma specs:\n - Vertical padding: 48px (margins/margin TB tight)\n - Gap between copy and buttons: 40px\n - Gap between heading and description: 16px\n - Max-width for copy: 840px\n ========================================================================== /\n\n.banner__content {\n position: relative;\n z-index: 1;\n flex: 1 1 0;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n gap: 40px;\n padding-top: 38px;\n padding-bottom: 38px;\n padding-right: 0;\n padding-left: 0;\n}\n\n.banner__copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 840px;\n width: 100%;\n white-space: normal;\n}\n\n/ ==========================================================================\n Heading\n \n Figma specs:\n - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n ========================================================================== /\n\n.banner__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 44px;\n line-height: 1;\n letter-spacing: -0.88px;\n color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n margin: 0;\n white-space: normal;\n}\n\n/ ==========================================================================\n Description\n \n Figma specs:\n - Font size: 18px\n - Line height: 26px\n - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n - Color: typography/body-default #2b484f (or theme variant)\n ========================================================================== /\n\n.banner__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-bodyweight, 400);\n font-size: 18px;\n line-height: 26px;\n color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n margin: 0;\n white-space: normal;\n}\n\n/ ==========================================================================\n Button Group\n \n Figma specs:\n - Desktop: horizontal, gap 12px\n - Mobile: vertical, full-width buttons, gap 12px\n - Button padding: 24px horizontal, 12px vertical\n - Button border-radius: 9999px (radii/button)\n ========================================================================== /\n\n.banner__buttons {\n display: flex;\n flex-direction: row;\n gap: 24px;\n align-items: flex-start;\n}\n\n/ ==========================================================================\n Mobile Responsive Styles (≤768px)\n \n Figma mobile specs:\n - Width: 100%\n - Border radius: 24px\n - Padding top: 224px (space for illustration)\n - Content padding: pb 48px, pt 16px, px 28px\n - Content min-height: 320px\n - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n ========================================================================== /\n\n/ mobile-only /\n@media (max-width: 768px) {\n .banner {\n flex-direction: column;\n align-items: stretch;\n padding: 224px 0 0 0;\n / Mobile keeps the same 20px corner as desktop — simpler after the\n * token ladder consolidation. /\n border-radius: var(--radius-lg, 20px);\n max-width: 100%;\n min-height: auto;\n }\n\n / Wave overlay hidden on mobile /\n .banner__wave-overlay {\n display: none;\n }\n\n / Illustration positioned at top-right on mobile /\n .banner__illustration {\n position: absolute;\n top: 12px;\n left: auto;\n right: 0;\n transform: none;\n width: 212px;\n height: 212px;\n max-width: 280px;\n max-height: 280px;\n }\n\n / Content takes full width with min-height /\n .banner__content {\n width: 100%;\n min-height: 320px;\n padding: 16px 28px 48px 28px;\n gap: 40px;\n flex: none;\n }\n\n / Ensure copy section doesn't constrain width on mobile /\n .banner__copy {\n max-width: 100%;\n }\n\n / Mobile heading size /\n .banner__heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n }\n\n / Buttons stack vertically on mobile, full width /\n .banner__buttons {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n width: 100%;\n }\n\n / Ensure af-button takes full width on mobile /\n .banner__buttons {\n --af-button-width: 100%;\n }\n\n .banner__buttons af-button {\n display: block;\n width: 100%;\n }\n}\n\n/ ==========================================================================\n Small Mobile (≤480px)\n ========================================================================== /\n\n/ ≤ small /\n@media (max-width: 480px) {\n .banner {\n padding-top: 200px;\n }\n\n .banner__illustration {\n / Keep right-aligned, just adjust size /\n right: 0;\n width: 180px;\n height: 180px;\n }\n\n .banner__content {\n padding: 16px 20px 36px 20px;\n min-height: 280px;\n }\n\n .banner__heading {\n font-size: 28px;\n letter-spacing: -0.56px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/\n In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * Illustration Usage:\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n * theme=\"inkwell\"\n * illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n * ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n \n Slot-based composition (preferred for rich content):\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n * props; use when you need ghost variants, more than two buttons, or\n * per-button icons).\n * - `illustration` — custom illustration markup.\n \n The string props remain supported for simple cases.\n /\n@Component({\n tag: 'af-in-page-banner',\n styleUrl: 'af-in-page-banner.css',\n shadow: false,\n scoped: true,\n})\nexport class AfInPageBanner {\n /* Theme - sets the banner background color and typography colors /\n @Prop() theme: Theme = 'mist-green';\n\n /* Banner heading /\n @Prop() heading: string = '';\n\n /* Banner description /\n @Prop() description: string = '';\n\n /* Primary button text /\n @Prop() primaryButtonText: string = '';\n\n /* Primary button URL /\n @Prop() primaryButtonUrl: string = '#';\n\n /* Secondary button text (optional - if empty, button won't show) /\n @Prop() secondaryButtonText: string = '';\n\n /* Secondary button URL /\n @Prop() secondaryButtonUrl: string = '#';\n\n /* \n * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n * from @affinda/illustrations in your app code.\n /\n @Prop() illustrationUrl: string = '';\n\n /* Whether to show the decorative wave overlay /\n @Prop() showWaveDecoration: boolean = true;\n\n /\n Renders the decorative wave SVG overlay.\n * Uses the Affinda brand \"infinity loop\" wave pattern.\n * Fill color is controlled via CSS custom properties per theme.\n /\n private renderWaveOverlay() {\n return (\n <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n <svg \n viewBox=\"0 0 521 323\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"banner__wave-svg\"\n >\n <path \n d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class={`banner theme-${this.theme}`}>\n {/ Decorative wave overlay /}\n {this.showWaveDecoration && this.renderWaveOverlay()}\n\n {/ Illustration area /}\n <div class=\"banner__illustration\">\n {this.illustrationUrl ? (\n <img \n src={this.illustrationUrl} \n alt=\"\" \n class=\"banner__illustration-img\" \n loading=\"lazy\"\n />\n ) : (\n <slot name=\"illustration\"></slot>\n )}\n </div>\n\n {/ Content area — slots take precedence over string props. */}\n <div class=\"banner__content\">\n <div class=\"banner__copy\">\n <h2 class=\"banner__heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </h2>\n <div class=\"banner__description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n </div>\n\n <div class=\"banner__buttons\">\n <slot name=\"buttons\">\n {this.primaryButtonText && (\n <af-button href={this.primaryButtonUrl} variant=\"primary\">\n {this.primaryButtonText}\n </af-button>\n )}\n {this.secondaryButtonText && (\n <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n {this.secondaryButtonText}\n </af-button>\n )}\n </slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/af-inline.js CHANGED Viewed

@@ -51,7 +51,7 @@ const AfInline$1 = /*@__PURE__*/ proxyCustomElement(class AfInline extends H {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '17b13c3b8a5ade7e5d3c990673b2e884b0ae5cb5', style: style }, h("slot", { key: 'ac563668c3e6e26f9a1b730c6edb16cb8cb46498' })));
+        return (h(Host, { key: '05c8a9c14341060f3e5f24397770740b09fee85c', style: style }, h("slot", { key: '871efa9e4e74690534375283878c8b0732f4859d' })));
     }
     static get style() { return afInlineCss; }
 }, [257, "af-inline", {

package/dist/components/af-inline.js.map CHANGED Viewed

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

package/dist/components/af-logo-well.js CHANGED Viewed

@@ -11,7 +11,7 @@ const AfLogoWell$1 = /*@__PURE__*/ proxyCustomElement(class AfLogoWell extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'c0896e6345cc862d0cd7105117016a5dc76b3141' }, h("div", { key: 'a754bb9b44319040e9b1bcb03c6440c60c91af25', class: "logo-well" }, h("slot", { key: '8f87dc5de8caba94cc30a529aaa8e4c4426c5e81' }))));
+        return (h(Host, { key: 'b3abd933476da0e33ab6fcc4cd2f638fd8d3d69e' }, h("div", { key: '16d17b912cb38663ae6d2f71109a99cc5cb9ab08', class: "logo-well" }, h("slot", { key: '801820bb88b3af3ebb1f9514b2a8f1297b6d033c' }))));
     }
     static get style() { return afLogoWellCss; }
 }, [257, "af-logo-well"]);

package/dist/components/af-nav-accordion-item.js CHANGED Viewed

@@ -85,11 +85,11 @@ const AfNavAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class AfNavAccordi
         // sub-content to expand. A plain href item with no children is a
         // direct link and shouldn't show a disclosure affordance.
         const hasDropdownContent = this.hasContent;
-        return (h(Host, { key: '6ec460cb9004968c1386dbd4987bdcbab85fc5ee', class: {
+        return (h(Host, { key: '514c8d8a02712f76eb9de767f6ab5c171f7cba8a', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: '8cfae124103bff2dbefee2972080014069346d85', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'd1e430c8bf9bfbed5da2a647352d5166680beaee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '8fe35fe547bc1658e1cc1fd18b6ded85f4b8ddbc', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '550b245714af43a08024486dee8f1532624abe03' }))))));
+            } }, h("div", { key: 'c8e9e4d3cea27fe1ecdcb629f1525c1e3fb8c02a', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '4da5b93689a0dac535dca6233b3c9d2218d333c1', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '103be83255e80feef963f95566cb22c0ab4bb338', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '2f48b5257f7fdcaf30635dc178ff452cd4a176a0' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/af-nav-accordion.js CHANGED Viewed

@@ -73,7 +73,7 @@ const AfNavAccordion$1 = /*@__PURE__*/ proxyCustomElement(class AfNavAccordion e
         this.syncItems();
     }
     render() {
-        return (h(Host, { key: '518288d29b17ac7ceb69ce24b37258dffefdd742', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '6a5e504a7114f3abbc064da71558342f9c45627d', class: "nav-accordion" }, h("slot", { key: '88560460c84396a492d2bc035f2d96c7c30afa58' }))));
+        return (h(Host, { key: 'a0c6718b375af88cefb975e997d70a228d1fb9aa', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '63b1716e6b40f7d73c9609a030b03af55a5db714', class: "nav-accordion" }, h("slot", { key: '48bb056a8e8cf39a47b20b8c54abbc7266f75765' }))));
     }
     get el() { return this; }
     static get style() { return afNavAccordionCss; }

package/dist/components/af-nav-menu-nest.js CHANGED Viewed

@@ -36,7 +36,7 @@ const AfNavMenuNest$1 = /*@__PURE__*/ proxyCustomElement(class AfNavMenuNest ext
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: '10f78b27ad9bb744415303815a0d332c521b97ce' }, h("div", { key: '1fd8d7624889e151a7051b0f8b2ee7c773ae4d60', class: classes }, h("div", { key: 'e2fefca6e151476e80c1b45d435bb72b623f8c15', class: "menu-columns" }, h("slot", { key: '321200c424b9e4b8b9f1f9cf101de1a2a4fdc742' })), h("div", { key: '8956a487218299d9735ece9a6ca9fe3a23828e0f', class: "menu-sidebar" }, h("slot", { key: '8cb04d5028ec97976d38b39a1b66f41600b7fa0f', name: "sidebar" })))));
+        return (h(Host, { key: '799695a1e7e9edef21a1df1a2424d39dda307796' }, h("div", { key: '04d44b23ab48f4fa36d772b607a913bff03573d4', class: classes }, h("div", { key: '572aa555fff3429dd72c8623759d324cbc686aae', class: "menu-columns" }, h("slot", { key: '5e0f32b02a01b57a853921cafc583a05ec5ead38' })), h("div", { key: 'e043ec11d26b4bb7e1ded5d55ea20c99aa52301e', class: "menu-sidebar" }, h("slot", { key: '6f8efbba5940a73bc26086ef5329b25af2019368', name: "sidebar" })))));
     }
     static get style() { return afNavMenuNestCss; }
 }, [262, "af-nav-menu-nest", {

package/dist/components/af-nav-menu.js CHANGED Viewed

@@ -33,7 +33,7 @@ const AfNavMenu$1 = /*@__PURE__*/ proxyCustomElement(class AfNavMenu extends H {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (h(Host, { key: 'e52759061a3d6767cea4a543ded89fd79c6cbeb0' }, h("div", { key: '365abac4a6588998a94f4c45955157b24fdea8b4', class: classes }, this.heading && (h("div", { key: 'cb380719d52dd2da2d7559330ea806f47a6c4e99', class: "menu-header" }, h("h3", { key: '7b71a56e995645f8371f66d581b3626fbf2f5e31', class: "menu-heading" }, this.heading))), h("div", { key: 'cf2f7c5351ed8c26dcd82d1c420d225f623847f6', class: "menu-items" }, h("slot", { key: '45f38b469a9dabb7823b56d52538925a6db90f0e' })))));
+        return (h(Host, { key: '98d8c217eb9e952d4feb3928c69cae1559621092' }, h("div", { key: '3185c320e6ce6cff4c2630fc7492bbb2b34ef838', class: classes }, this.heading && (h("div", { key: '207eeef13c68e3ff26dcf2bbeee20574c7fab481', class: "menu-header" }, h("h3", { key: 'a2c6e28d60b2aeb49b96e99c57c853493b415a4c', class: "menu-heading" }, this.heading))), h("div", { key: 'f133eea0ed320467cd4840820251d09e2d98f49f', class: "menu-items" }, h("slot", { key: '91b640df3dd990f556d394056683ddd9fd26d6c3' })))));
     }
     static get style() { return afNavMenuCss; }
 }, [262, "af-nav-menu", {

package/dist/components/af-navbar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { A as AfNavbar$1, d as defineCustomElement$1 } from './p-HMlLQQwp.js';
+import { A as AfNavbar$1, d as defineCustomElement$1 } from './p-DqJRvNOl.js';
 const AfNavbar = AfNavbar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-number-badge.js CHANGED Viewed

@@ -1,61 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
-const afNumberBadgeCss = ":host{display:inline-flex;align-items:center;justify-content:center;line-height:1;user-select:none;flex-shrink:0}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);font-weight:500}.badge.variant-inCircle{border-radius:50%;background-color:var(--af-color-brand-soft-clay, #B09670);color:var(--af-color-brand-inkwell, #14343B)}.badge.variant-outlined{background-color:transparent;color:var(--af-color-brand-mist-green, #C6D5D1)}";
-const AfNumberBadge$1 = /*@__PURE__*/ proxyCustomElement(class AfNumberBadge extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The number to display (1-10)
-         */
-        this.number = 1;
-        /**
-         * Visual variant of the badge
-         * - `inCircle` - Number in filled soft-clay circle
-         * - `outlined` - Number text only in mist-green
-         */
-        this.variant = 'inCircle';
-        /**
-         * Size of the badge in pixels
-         */
-        this.size = 48;
-    }
-    render() {
-        const isInCircle = this.variant === 'inCircle';
-        const fontSize = isInCircle ? this.size * 0.4 : this.size * 0.8;
-        const badgeStyle = {
-            width: `${this.size}px`,
-            height: `${this.size}px`,
-            fontSize: `${fontSize}px`,
-        };
-        return (h(Host, { key: '816770ea4351ba01a7c069b57558efad8015f5f8', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '33bd320ab7e56fbf29251035008e862b6a249258', class: {
-                'badge': true,
-                [`variant-${this.variant}`]: true,
-            }, style: badgeStyle }, this.number)));
-    }
-    static get style() { return afNumberBadgeCss; }
-}, [257, "af-number-badge", {
-        "number": [2],
-        "variant": [1],
-        "size": [2]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-number-badge"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-number-badge":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfNumberBadge$1);
-            }
-            break;
-    } });
-}
+import { A as AfNumberBadge$1, d as defineCustomElement$1 } from './p-QoDae21y.js';
 const AfNumberBadge = AfNumberBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-number-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"af-number-badge.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mgBAAmgB;;MCoB/gBA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAsB,CAAC;AAErC;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,UAAU;AAEhD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA6B1B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU;AAC9C,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG;AAE/D,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;AACvB,YAAA,MAAM,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;YACxB,QAAQ,EAAE,CAAG,EAAA,QAAQ,CAAI,EAAA,CAAA;SAC1B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,KAAK,EACE,YAAA,EAAA,CAAU,OAAA,EAAA,IAAI,CAAC,MAAM,CAAA,EAAG,UAAU,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAA,EAEhE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAClC,EACD,KAAK,EAAE,UAAU,EAEhB,EAAA,IAAI,CAAC,MAAM,CACP,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[~~"AfNumberBadge","__stencil_proxyCustomElement","HTMLElement"~~],"sources":[~~"src/components/af-number-badge/af-number-badge.css?tag=af-number-badge&encapsulation=shadow","src/components/af-number-badge/af-number-badge.tsx"~~],"sourcesContent":[":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n user-select: none;\n flex-shrink: 0;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);\n font-weight: 500;\n}\n\n/* In Circle variant - filled soft-clay circle /\n.badge.variant-inCircle {\n border-radius: 50%;\n background-color: var(--af-color-brand-soft-clay, #B09670);\n color: var(--af-color-brand-inkwell, #14343B);\n}\n\n/ Outlined variant - text only in mist-green /\n.badge.variant-outlined {\n background-color: transparent;\n color: var(--af-color-brand-mist-green, #C6D5D1);\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type NumberBadgeNumber = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10;\nexport type NumberBadgeVariant = 'inCircle' \| 'outlined';\n\n/\n NumberBadge displays numbers 1-10 in either a filled circle or text-only style.\n * Perfect for numbered lists, step indicators, or ordered content.\n * \n * @example\n * ```html\n * <af-number-badge number=\"1\" variant=\"inCircle\" size=\"48\"></af-number-badge>\n * <af-number-badge number=\"5\" variant=\"outlined\" size=\"32\"></af-number-badge>\n * ```\n /\n@Component({\n tag: 'af-number-badge',\n styleUrl: 'af-number-badge.css',\n shadow: true\n})\nexport class AfNumberBadge {\n /\n The number to display (1-10)\n /\n @Prop() number: NumberBadgeNumber = 1;\n\n /\n Visual variant of the badge\n * - `inCircle` - Number in filled soft-clay circle\n * - `outlined` - Number text only in mist-green\n /\n @Prop() variant: NumberBadgeVariant = 'inCircle';\n\n /\n Size of the badge in pixels\n /\n @Prop() size: number = 48;\n\n render() {\n const isInCircle = this.variant === 'inCircle';\n const fontSize = isInCircle ? this.size 0.4 : this.size * 0.8;\n\n const badgeStyle = {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${fontSize}px`,\n };\n\n return (\n <Host\n role=\"img\"\n aria-label={`Number ${this.number}${isInCircle ? ' badge' : ''}`}\n >\n <span\n class={{\n 'badge': true,\n [`variant-${this.variant}`]~~: true,\n }}\n style={badgeStyle}\n >\n {this.number}\n </span>\n </Host>\n );\n }\n}\n\n"]~~,"version":3}
1	+ {"file":"af-number-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-numbered-stepper-item.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface AfNumberedStepperItem extends Components.AfNumberedStepperItem, HTMLElement {}
+export const AfNumberedStepperItem: {
+    prototype: AfNumberedStepperItem;
+    new (): AfNumberedStepperItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-numbered-stepper-item.js ADDED Viewed

@@ -0,0 +1,58 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+import { d as defineCustomElement$3 } from './p-QoDae21y.js';
+import { d as defineCustomElement$2 } from './p-ClZAZSzR.js';
+const afNumberedStepperItemCss = ".sc-af-numbered-stepper-item-h{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--space-6, 24px);min-width:0;color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343B))}.numbered-stepper-item__marker-row.sc-af-numbered-stepper-item{position:relative;display:flex;justify-content:center;width:100%;margin-bottom:var(--space-6, 24px)}.numbered-stepper-item__badge.sc-af-numbered-stepper-item{position:relative;z-index:1}.numbered-stepper-item__connector.sc-af-numbered-stepper-item{position:absolute;left:calc(50% + 20px);right:calc(-50% + 20px);top:50%;height:1px;background:var(--colour-brand-soft-clay, #B09670)}.sc-af-numbered-stepper-item-h:last-child .numbered-stepper-item__connector.sc-af-numbered-stepper-item{display:none}.numbered-stepper-item__lockup.sc-af-numbered-stepper-item{display:block;max-width:320px}.numbered-stepper--vertical.sc-af-numbered-stepper-item-h,.numbered-stepper--vertical .sc-af-numbered-stepper-item-h{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--space-6, 24px);padding:0}.numbered-stepper--vertical.sc-af-numbered-stepper-item-h .numbered-stepper-item__marker-row.sc-af-numbered-stepper-item,.numbered-stepper--vertical .sc-af-numbered-stepper-item-h .numbered-stepper-item__marker-row.sc-af-numbered-stepper-item{width:auto;flex-shrink:0;margin-bottom:0;align-self:stretch;justify-content:flex-start;align-items:flex-start}.numbered-stepper--vertical.sc-af-numbered-stepper-item-h .numbered-stepper-item__connector.sc-af-numbered-stepper-item,.numbered-stepper--vertical .sc-af-numbered-stepper-item-h .numbered-stepper-item__connector.sc-af-numbered-stepper-item{left:50%;right:auto;top:calc(var(--space-10, 40px) + var(--space-1, 4px));bottom:calc(var(--space-8, 32px) * -1);height:auto;width:1px;transform:translateX(-50%)}.numbered-stepper--vertical.sc-af-numbered-stepper-item-h .numbered-stepper-item__lockup.sc-af-numbered-stepper-item,.numbered-stepper--vertical .sc-af-numbered-stepper-item-h .numbered-stepper-item__lockup.sc-af-numbered-stepper-item{max-width:none;flex:1 1 auto;padding-top:var(--space-2, 8px)}@media (max-width: 767px){.numbered-stepper--horizontal.sc-af-numbered-stepper-item-h,.numbered-stepper--horizontal .sc-af-numbered-stepper-item-h{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--space-6, 24px);padding:0}.numbered-stepper--horizontal.sc-af-numbered-stepper-item-h .numbered-stepper-item__marker-row.sc-af-numbered-stepper-item,.numbered-stepper--horizontal .sc-af-numbered-stepper-item-h .numbered-stepper-item__marker-row.sc-af-numbered-stepper-item{width:auto;flex-shrink:0;margin-bottom:0}.numbered-stepper--horizontal.sc-af-numbered-stepper-item-h .numbered-stepper-item__connector.sc-af-numbered-stepper-item,.numbered-stepper--horizontal .sc-af-numbered-stepper-item-h .numbered-stepper-item__connector.sc-af-numbered-stepper-item{display:none}.numbered-stepper--horizontal.sc-af-numbered-stepper-item-h .numbered-stepper-item__lockup.sc-af-numbered-stepper-item,.numbered-stepper--horizontal .sc-af-numbered-stepper-item-h .numbered-stepper-item__lockup.sc-af-numbered-stepper-item{max-width:none;flex:1 1 auto;padding-top:var(--space-2, 8px)}}";
+const AfNumberedStepperItem$1 = /*@__PURE__*/ proxyCustomElement(class AfNumberedStepperItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Step number shown in the badge. Auto-assigned by the parent stepper if
+         * not explicitly set.
+         */
+        this.index = 1;
+    }
+    render() {
+        // The badge supports 1–10; clamp for safety so we never pass a bad prop.
+        const clamped = Math.max(1, Math.min(10, this.index | 0));
+        return (h(Host, { key: '6aa07b74803b11d666b724fe2c96149860c58810', role: "listitem" }, h("div", { key: 'ddf3ea9200c5015dbefb53a2dc77ade6f634e24e', class: "numbered-stepper-item__marker-row", "aria-hidden": "true" }, h("af-number-badge", { key: 'b778abffa4a41bbea6728920c61e1f2d2155662a', class: "numbered-stepper-item__badge", number: clamped, variant: "inCircle", size: 40 }), h("span", { key: 'e3f74fb9b1bc4fe999095878bdbe10f47694f8d8', class: "numbered-stepper-item__connector" })), h("af-typography-lockup", { key: '6f4688fc503175db37d5a91fa626b43692e4858a', class: "numbered-stepper-item__lockup", "heading-size": "card", "text-alignment": "center" }, h("slot", { key: 'd628fb339348c23c988e4fb69bc647105d7041f6', name: "heading" }), h("span", { key: 'a5b58d21e44537de9c32b22a754e0f4a8ef96007', slot: "description" }, h("slot", { key: '17607c180f777c5f829ea9d9919c5a7187718f2d', name: "body" })))));
+    }
+    static get style() { return afNumberedStepperItemCss; }
+}, [262, "af-numbered-stepper-item", {
+        "index": [514]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-numbered-stepper-item", "af-number-badge", "af-typography-lockup"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-numbered-stepper-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNumberedStepperItem$1);
+            }
+            break;
+        case "af-number-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "af-typography-lockup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const AfNumberedStepperItem = AfNumberedStepperItem$1;
+const defineCustomElement = defineCustomElement$1;
+export { AfNumberedStepperItem, defineCustomElement };
+//# sourceMappingURL=af-numbered-stepper-item.js.map
+//# sourceMappingURL=af-numbered-stepper-item.js.map

package/dist/components/af-numbered-stepper-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"af-numbered-stepper-item.js","mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,4pGAA4pG;;MCsBhrGA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AANlC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AA8B3C;IA5BC,MAAM,GAAA;;QAEJ,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAA2C;AAEnG,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mCAAmC,EAAA,aAAA,EAAa,MAAM,EAAA,EAC/D,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,8BAA8B,EACpC,MAAM,EAAE,OAAO,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAE,EAAE,EACS,CAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kCAAkC,EAAA,CAAQ,CAClD,EACN,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,+BAA+B,EACxB,cAAA,EAAA,MAAM,oBACJ,QAAQ,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,EAC5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,CACc,CAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNumberedStepperItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-numbered-stepper-item/af-numbered-stepper-item.css?tag=af-numbered-stepper-item&encapsulation=scoped","src/components/af-numbered-stepper-item/af-numbered-stepper-item.tsx"],"sourcesContent":["/* Horizontal default: centered column — badge on top, lockup below.\n * The connector is a 1px line on the right half of the marker row that\n * reaches into the next sibling's marker row, so visually the line spans\n * between the two badges. Hidden on :last-child. */\n:host {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 0 var(--space-6, 24px);\n min-width: 0;\n color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343B));\n}\n\n.numbered-stepper-item__marker-row {\n position: relative;\n display: flex;\n justify-content: center;\n width: 100%;\n margin-bottom: var(--space-6, 24px);\n}\n\n.numbered-stepper-item__badge {\n position: relative;\n z-index: 1;\n}\n\n/* Connector segment between this badge and the next one.\n * 20px = half of 40px badge. We offset by that from the centre so the line\n * starts at the edge of the badge and stretches off the right side of the\n * host, joining the next item's mirror-offset half. */\n.numbered-stepper-item__connector {\n position: absolute;\n left: calc(50% + 20px);\n right: calc(-50% + 20px);\n top: 50%;\n height: 1px;\n background: var(--colour-brand-soft-clay, #B09670);\n}\n\n/* Last item doesn't draw a connector. */\n:host(:last-child) .numbered-stepper-item__connector {\n display: none;\n}\n\n.numbered-stepper-item__lockup {\n display: block;\n max-width: 320px;\n}\n\n/* Vertical parent orientation: badges in a column, text to the right.\n * Connector runs vertically along the badge column. */\n:host-context(.numbered-stepper--vertical) {\n flex-direction: row;\n align-items: flex-start;\n text-align: left;\n gap: var(--space-6, 24px);\n padding: 0;\n}\n\n:host-context(.numbered-stepper--vertical) .numbered-stepper-item__marker-row {\n width: auto;\n flex-shrink: 0;\n margin-bottom: 0;\n /* Pin to top so subsequent text content flows naturally beside it. */\n align-self: stretch;\n justify-content: flex-start;\n align-items: flex-start;\n}\n\n:host-context(.numbered-stepper--vertical) .numbered-stepper-item__connector {\n left: 50%;\n right: auto;\n top: calc(var(--space-10, 40px) + var(--space-1, 4px));\n bottom: calc(var(--space-8, 32px) * -1);\n height: auto;\n width: 1px;\n transform: translateX(-50%);\n}\n\n:host-context(.numbered-stepper--vertical) .numbered-stepper-item__lockup {\n max-width: none;\n flex: 1 1 auto;\n /* Align text baseline roughly to the badge centre. */\n padding-top: var(--space-2, 8px);\n}\n\n/* ≤ mobile — horizontal collapses to a vertical row-layout for the item too. */\n@media (max-width: 767px) {\n :host-context(.numbered-stepper--horizontal) {\n flex-direction: row;\n align-items: flex-start;\n text-align: left;\n gap: var(--space-6, 24px);\n padding: 0;\n }\n\n :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__marker-row {\n width: auto;\n flex-shrink: 0;\n margin-bottom: 0;\n }\n\n :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__connector {\n display: none;\n }\n\n :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__lockup {\n max-width: none;\n flex: 1 1 auto;\n padding-top: var(--space-2, 8px);\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single step within an `af-numbered-stepper`. Renders a filled soft-clay\n * circle badge (via `af-number-badge`) alongside a heading + body lockup.\n *\n * The parent `af-numbered-stepper` auto-assigns the `index` prop based on\n * DOM order. Pass `index` explicitly to override.\n *\n * Heading scale is the shared `card` variant from `af-typography-lockup`\n * (22/20px) — the same ladder step used by diff-card, related-card, and\n * other card-title uses across the design system.\n *\n * @slot heading - Step title (h3 or h4 recommended for semantics).\n * @slot body - Step description paragraph(s).\n */\n@Component({\n tag: 'af-numbered-stepper-item',\n styleUrl: 'af-numbered-stepper-item.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNumberedStepperItem {\n /**\n * Step number shown in the badge. Auto-assigned by the parent stepper if\n * not explicitly set.\n */\n @Prop({ reflect: true }) index: number = 1;\n\n render() {\n // The badge supports 1–10; clamp for safety so we never pass a bad prop.\n const clamped = Math.max(1, Math.min(10, this.index | 0)) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\n return (\n <Host role=\"listitem\">\n <div class=\"numbered-stepper-item__marker-row\" aria-hidden=\"true\">\n <af-number-badge\n class=\"numbered-stepper-item__badge\"\n number={clamped}\n variant=\"inCircle\"\n size={40}\n ></af-number-badge>\n <span class=\"numbered-stepper-item__connector\"></span>\n </div>\n <af-typography-lockup\n class=\"numbered-stepper-item__lockup\"\n heading-size=\"card\"\n text-alignment=\"center\"\n >\n <slot name=\"heading\"></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n </af-typography-lockup>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/af-numbered-stepper.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface AfNumberedStepper extends Components.AfNumberedStepper, HTMLElement {}
+export const AfNumberedStepper: {
+    prototype: AfNumberedStepper;
+    new (): AfNumberedStepper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-numbered-stepper.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+const afNumberedStepperCss = ".sc-af-numbered-stepper-h{display:grid;width:100%;max-width:1120px;margin:0 auto}.numbered-stepper--horizontal.sc-af-numbered-stepper{grid-auto-columns:1fr;grid-auto-flow:column;gap:0}.numbered-stepper--vertical.sc-af-numbered-stepper{max-width:680px;grid-auto-flow:row;gap:var(--space-8, 32px)}@media (max-width: 767px){.numbered-stepper--horizontal.sc-af-numbered-stepper{grid-auto-flow:row;grid-auto-columns:unset;gap:var(--space-8, 32px)}}";
+const AfNumberedStepper$1 = /*@__PURE__*/ proxyCustomElement(class AfNumberedStepper extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Layout orientation. Horizontal auto-stacks to vertical on mobile. */
+        this.orientation = 'horizontal';
+    }
+    componentDidLoad() {
+        this.assignIndices();
+    }
+    componentDidUpdate() {
+        this.assignIndices();
+    }
+    assignIndices() {
+        const items = Array.from(this.el.querySelectorAll('af-numbered-stepper-item'));
+        items.forEach((item, i) => {
+            // Only set when the consumer hasn't explicitly numbered the step.
+            if (item.index == null || item.index === 1) {
+                item.index = i + 1;
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: 'a1df62f85981a64331d4b641074eaa54db04fef8', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, h("slot", { key: '2c1fbae6a474c883ce7eef49b79610882b401464' })));
+    }
+    get el() { return this; }
+    static get style() { return afNumberedStepperCss; }
+}, [262, "af-numbered-stepper", {
+        "orientation": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-numbered-stepper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-numbered-stepper":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNumberedStepper$1);
+            }
+            break;
+    } });
+}
+const AfNumberedStepper = AfNumberedStepper$1;
+const defineCustomElement = defineCustomElement$1;
+export { AfNumberedStepper, defineCustomElement };
+//# sourceMappingURL=af-numbered-stepper.js.map
+//# sourceMappingURL=af-numbered-stepper.js.map

package/dist/components/af-numbered-stepper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"af-numbered-stepper.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,6bAA6b;;MCqC7cA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAN9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAUU,QAAA,IAAW,CAAA,WAAA,GAA8B,YAAY;AAgC9D;IA9BC,gBAAgB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;;IAGtB,kBAAkB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;IAGd,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAClB;QACpC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;;AAExB,YAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;AAC1C,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;;AAEtB,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,CAAsC,mCAAA,EAAA,IAAI,CAAC,WAAW,CAAA,CAAE,EAC/D,IAAI,EAAC,MAAM,EAAA,EAEX,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNumberedStepper","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-numbered-stepper/af-numbered-stepper.css?tag=af-numbered-stepper&encapsulation=scoped","src/components/af-numbered-stepper/af-numbered-stepper.tsx"],"sourcesContent":[":host {\n display: grid;\n width: 100%;\n max-width: 1120px;\n margin: 0 auto;\n}\n\n/* Horizontal: equal-width columns; each item paints its own connector segment. */\n.numbered-stepper--horizontal {\n grid-auto-columns: 1fr;\n grid-auto-flow: column;\n gap: 0;\n}\n\n/* Vertical: one column; items render the badge-row inline and the connector\n * runs along the top of the row between badges. */\n.numbered-stepper--vertical {\n max-width: 680px;\n grid-auto-flow: row;\n gap: var(--space-8, 32px);\n}\n\n/* ≤ mobile — horizontal collapses to vertical stack. */\n@media (max-width: 767px) {\n .numbered-stepper--horizontal {\n grid-auto-flow: row;\n grid-auto-columns: unset;\n gap: var(--space-8, 32px);\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a\n * heading + body description per step. Sibling to `af-stepper` (which uses\n * outlined badges on a single spine connector); the numbered variant uses\n * filled badges with per-step connector segments, matching the Webflow\n * \"How it works\" marketing pattern.\n *\n * Renders children `af-numbered-stepper-item` elements horizontally on\n * desktop (auto-stacks on mobile) or vertically when `orientation=\"vertical\"`.\n * The parent auto-assigns badge numbers based on DOM order, so consumers\n * don't hand-number the steps.\n *\n * Headings use the shared `heading-size=\"card\"` scale from\n * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.\n *\n * @example\n * ```html\n * <af-numbered-stepper>\n * <af-numbered-stepper-item>\n * <h3 slot=\"heading\">Connect your ATS</h3>\n * <p slot=\"body\">OAuth-based hook into the tools you already use.</p>\n * </af-numbered-stepper-item>\n * <af-numbered-stepper-item>...</af-numbered-stepper-item>\n * <af-numbered-stepper-item>...</af-numbered-stepper-item>\n * </af-numbered-stepper>\n * ```\n *\n * @slot - `af-numbered-stepper-item` elements.\n */\n@Component({\n tag: 'af-numbered-stepper',\n styleUrl: 'af-numbered-stepper.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNumberedStepper {\n @Element() el!: HTMLElement;\n\n /** Layout orientation. Horizontal auto-stacks to vertical on mobile. */\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n componentDidLoad() {\n this.assignIndices();\n }\n\n componentDidUpdate() {\n this.assignIndices();\n }\n\n private assignIndices() {\n const items = Array.from(\n this.el.querySelectorAll('af-numbered-stepper-item'),\n ) as unknown as { index?: number }[];\n items.forEach((item, i) => {\n // Only set when the consumer hasn't explicitly numbered the step.\n if (item.index == null || item.index === 1) {\n item.index = i + 1;\n }\n });\n }\n\n render() {\n return (\n <Host\n class={`numbered-stepper numbered-stepper--${this.orientation}`}\n role=\"list\"\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/af-paperclip-decoration.js CHANGED Viewed

@@ -32,7 +32,7 @@ const AfPaperclipDecoration$1 = /*@__PURE__*/ proxyCustomElement(class AfPapercl
         this.fill = 'white';
     }
     render() {
-        return (h(Host, { key: '679d13bd4d4824752eb722a39fda943553da8a30' }, h("svg", { key: 'dc6ea4d9fe9c09512d48b09c0a95ec8fd6a4f2f2', "aria-hidden": "true", width: this.width, height: this.height, viewBox: "0 0 655 754", fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none" }, h("path", { key: '0b9121fa25531dd6725b0db1e2174d3df9bafc3b', d: "M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z", fill: this.fill, "fill-opacity": this.opacity }))));
+        return (h(Host, { key: 'd6dbabf8f5f23ba6d590edc88d603ac67c677404' }, h("svg", { key: 'c32dce895897561ed17814fd298ced3b5f89ac62', "aria-hidden": "true", width: this.width, height: this.height, viewBox: "0 0 655 754", fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none" }, h("path", { key: '21db7944de968d0f8d96bdcf9cf3cc6ecdd49013', d: "M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z", fill: this.fill, "fill-opacity": this.opacity }))));
     }
     static get style() { return afPaperclipDecorationCss; }
 }, [257, "af-paperclip-decoration", {

package/dist/components/af-progress-line.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { A as AfProgressLine$1, d as defineCustomElement$1 } from './p-DO9J0XTo.js';
+import { A as AfProgressLine$1, d as defineCustomElement$1 } from './p-BXmiPS9x.js';
 const AfProgressLine = AfProgressLine$1;
 const defineCustomElement = defineCustomElement$1;