@affinda/wc 0.0.14 → 0.0.16

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

@@ -0,0 +1,82 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-DBnL9UHx.js';
+
+const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radii-card-level-1, 32px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:360px;height:360px;max-width:360px;max-height:360px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:var(--margins-margin-tb-tight, 48px);padding-bottom:var(--margins-margin-tb-tight, 48px);padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:pre-wrap}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:pre-wrap}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:pre-wrap}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:12px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radii-card-level-1-mobile, 24px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";
+
+const AfInPageBanner$1 = /*@__PURE__*/ proxyCustomElement(class AfInPageBanner extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Theme - sets the banner background color and typography colors */
+        this.theme = 'mist-green';
+        /** Banner heading */
+        this.heading = '';
+        /** Banner description */
+        this.description = '';
+        /** Primary button text */
+        this.primaryButtonText = '';
+        /** Primary button URL */
+        this.primaryButtonUrl = '#';
+        /** Secondary button text (optional - if empty, button won't show) */
+        this.secondaryButtonText = '';
+        /** Secondary button URL */
+        this.secondaryButtonUrl = '#';
+        /**
+         * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene()
+         * from @affinda/illustrations in your app code.
+         */
+        this.illustrationUrl = '';
+        /** Whether to show the decorative wave overlay */
+        this.showWaveDecoration = true;
+    }
+    /**
+     * Renders the decorative wave SVG overlay.
+     * Uses the Affinda brand "infinity loop" wave pattern.
+     * Fill color is controlled via CSS custom properties per theme.
+     */
+    renderWaveOverlay() {
+        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: '41403ba6ca0b60c416dd41d81f1eedbfe566f5c4' }, h("div", { key: '0c68549f2f1664d676fd969500702ccb8d4e43f5', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '213397e65a87e0999f857af1201219ec1987c5b1', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '972c0ba5f99a8cc22bb9bf04402ee6f7feabb6be', class: "banner__content" }, h("div", { key: '659301eefed48b4abdfaaafa2c4db3fe242703fc', class: "banner__copy" }, this.heading && (h("h2", { key: 'aa4e2b0acf38d149b302c573da7e8f5bf097b846', class: "banner__heading" }, this.heading)), this.description && (h("p", { key: 'e0bb0b75f31b1a3c5bb0c61e48521a3ee0085f6e', class: "banner__description" }, this.description))), (this.primaryButtonText || this.secondaryButtonText) && (h("div", { key: '8a029743425b837cc8275eea38a1313366add6ec', class: "banner__buttons" }, this.primaryButtonText && (h("af-button", { key: '9a237dc0b9c4165c7b96ba526aae791b8504941e', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'a9ab21d4efa1f68061b64f6e64c1da2d179eb0d2', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+    }
+    static get style() { return afInPageBannerCss; }
+}, [262, "af-in-page-banner", {
+        "theme": [1],
+        "heading": [1],
+        "description": [1],
+        "primaryButtonText": [1, "primary-button-text"],
+        "primaryButtonUrl": [1, "primary-button-url"],
+        "secondaryButtonText": [1, "secondary-button-text"],
+        "secondaryButtonUrl": [1, "secondary-button-url"],
+        "illustrationUrl": [1, "illustration-url"],
+        "showWaveDecoration": [4, "show-wave-decoration"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-in-page-banner", "af-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-in-page-banner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfInPageBanner$1);
+            }
+            break;
+        case "af-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfInPageBanner = AfInPageBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfInPageBanner, defineCustomElement };
+//# sourceMappingURL=af-in-page-banner.js.map
+
+//# sourceMappingURL=af-in-page-banner.js.map

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

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

package/dist/components/af-input.d.ts

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

package/dist/components/af-input.js

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

package/dist/components/af-input.js.map

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

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

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
 
-const afLogoWellCss = ":host{display:inline-block}.logo-well{background:rgb(32, 62, 69);border-radius:16px;height:72px;width:184px;display:flex;align-items:center;justify-content:center;padding:20px 32px;box-sizing:border-box}::slotted(img){max-height:32px;max-width:120px;width:auto;height:auto;display:block;object-fit:contain;filter:brightness(0) invert(1);}::slotted(svg){max-height:32px;max-width:120px;width:auto;height:auto;display:block}::slotted(div){white-space:nowrap;color:white;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:600;font-size:16px}";
+const afLogoWellCss = ":host{display:inline-block}.logo-well{background:var(--af-carousel-logo-well-bg, var(--colour-background-level1-dark, #203e45));border-radius:var(--radius-logo-well-desktop, 16px);height:72px;width:184px;display:flex;align-items:center;justify-content:center;padding:20px 32px;box-sizing:border-box}::slotted(img){max-height:32px;max-width:120px;width:auto;height:auto;display:block;object-fit:contain;filter:var(--af-carousel-logo-filter, brightness(0) invert(1))}::slotted(svg){max-height:32px;max-width:120px;width:auto;height:auto;display:block;color:var(--af-carousel-logo-color, white)}::slotted(div){white-space:nowrap;color:var(--af-carousel-logo-color, white);font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:600;font-size:16px}@media (max-width: 767px){.logo-well{border-radius:var(--radius-logo-well-mobile, 12px);padding:20px 24px}}";
 
 const AfLogoWell$1 = /*@__PURE__*/ proxyCustomElement(class AfLogoWell extends H {
     constructor(registerHost) {
@@ -11,7 +11,7 @@ const AfLogoWell$1 = /*@__PURE__*/ proxyCustomElement(class AfLogoWell extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'b99aefd4635d21c0072b89923619b95a0497251e' }, h("div", { key: 'e35b23d12938521ba306c0499516434d25cd66f2', class: "logo-well" }, h("slot", { key: 'd1894aec9b2136b288de9e9c508bbaa12fd4a612' }))));
+        return (h(Host, { key: 'f64c4eb4974d71972365ba55c49b54bd1667d157' }, h("div", { key: '1192eb30a0dcb0426d15b23148f9f48b2ded06d4', class: "logo-well" }, h("slot", { key: 'f62638c5fab67512858baf0756c38ce45546dd0e' }))));
     }
     static get style() { return afLogoWellCss; }
 }, [257, "af-logo-well"]);

package/dist/components/af-logo-well.js.map

@@ -1 +1 @@
-{"file":"af-logo-well.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sjBAAsjB;;MCU/jBA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;IACrB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["AfLogoWell","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-logo-well/af-logo-well.css?tag=af-logo-well&encapsulation=shadow","src/components/af-logo-well/af-logo-well.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.logo-well {\n  background: rgb(32, 62, 69); /* Slightly lighter than inkwell for contrast */\n  border-radius: 16px;\n  height: 72px;\n  width: 184px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px 32px;\n  box-sizing: border-box;\n}\n\n::slotted(img) {\n  max-height: 32px;\n  max-width: 120px;\n  width: auto;\n  height: auto;\n  display: block;\n  object-fit: contain;\n  filter: brightness(0) invert(1); /* Make logos white */\n}\n\n::slotted(svg) {\n  max-height: 32px;\n  max-width: 120px;\n  width: auto;\n  height: auto;\n  display: block;\n}\n\n::slotted(div) {\n  white-space: nowrap;\n  color: white;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 600;\n  font-size: 16px;\n}\n\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A rounded container for displaying client logos\n */\n@Component({\n  tag: 'af-logo-well',\n  styleUrl: 'af-logo-well.css',\n  shadow: true,\n})\nexport class AfLogoWell {\n  render() {\n    return (\n      <Host>\n        <div class=\"logo-well\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"af-logo-well.js","mappings":";;AAAA,MAAM,aAAa,GAAG,02BAA02B;;MCUn3BA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;IACrB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["AfLogoWell","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-logo-well/af-logo-well.css?tag=af-logo-well&encapsulation=shadow","src/components/af-logo-well/af-logo-well.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.logo-well {\n  /* Use theme variable from parent carousel, or fall back to dark theme default */\n  background: var(--af-carousel-logo-well-bg, var(--colour-background-level1-dark, #203e45));\n  border-radius: var(--radius-logo-well-desktop, 16px);\n  height: 72px;\n  width: 184px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px 32px;\n  box-sizing: border-box;\n}\n\n::slotted(img) {\n  max-height: 32px;\n  max-width: 120px;\n  width: auto;\n  height: auto;\n  display: block;\n  object-fit: contain;\n  /* Use logo filter from parent theme, default to white logos for dark backgrounds */\n  filter: var(--af-carousel-logo-filter, brightness(0) invert(1));\n}\n\n::slotted(svg) {\n  max-height: 32px;\n  max-width: 120px;\n  width: auto;\n  height: auto;\n  display: block;\n  /* SVG color inherits from parent */\n  color: var(--af-carousel-logo-color, white);\n}\n\n::slotted(div) {\n  white-space: nowrap;\n  color: var(--af-carousel-logo-color, white);\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 600;\n  font-size: 16px;\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n  .logo-well {\n    border-radius: var(--radius-logo-well-mobile, 12px);\n    padding: 20px 24px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A rounded container for displaying client logos\n */\n@Component({\n  tag: 'af-logo-well',\n  styleUrl: 'af-logo-well.css',\n  shadow: true,\n})\nexport class AfLogoWell {\n  render() {\n    return (\n      <Host>\n        <div class=\"logo-well\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/af-logo.js

@@ -1,4 +1,4 @@
-import { A as AfLogo$1, d as defineCustomElement$1 } from './p-D4s4u7tL.js';
+import { A as AfLogo$1, d as defineCustomElement$1 } from './p-D99aXp3U.js';
 
 const AfLogo = AfLogo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-nav-card.d.ts

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

package/dist/components/af-nav-card.js

@@ -0,0 +1,63 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+
+const afNavCardCss = ":host{display:block}.card-link{text-decoration:none;color:inherit;display:block}.nav-card{display:flex;flex-direction:column;position:relative;width:290px;height:360px;min-height:360px;border-radius:var(--radii-image, 16px);overflow:hidden;justify-content:flex-end;transition:transform 0.2s ease}.nav-card.is-hovered{transform:scale(1.02)}.image-container{position:absolute;inset:0;overflow:hidden}.card-image{width:100%;height:100%;object-fit:cover;object-position:center}.overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);padding:80px 24px 24px 24px;display:flex;flex-direction:column;align-items:flex-start}.heading{margin:0;font-family:var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--font-weight-book, 500);font-size:24px;line-height:1.2;letter-spacing:-0.48px;color:#ffffff;width:100%}.nav-card.is-hovered .heading{text-decoration:underline}";
+
+const AfNavCard$1 = /*@__PURE__*/ proxyCustomElement(class AfNavCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Alternative text for the image
+         */
+        this.imageAlt = '';
+        this.isHovered = false;
+        this.handleMouseEnter = () => {
+            this.isHovered = true;
+        };
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+        };
+    }
+    render() {
+        const classes = {
+            'nav-card': true,
+            'is-hovered': this.isHovered
+        };
+        const content = (h("div", { class: classes, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { class: "image-container" }, this.imageSrc && (h("img", { src: this.imageSrc, alt: this.imageAlt, class: "card-image" }))), h("div", { class: "overlay" }, this.heading && (h("h3", { class: "heading" }, this.heading)))));
+        if (this.href) {
+            return (h(Host, null, h("a", { href: this.href, class: "card-link" }, content)));
+        }
+        return h(Host, null, content);
+    }
+    static get style() { return afNavCardCss; }
+}, [257, "af-nav-card", {
+        "heading": [1],
+        "href": [1],
+        "imageSrc": [1, "image-src"],
+        "imageAlt": [1, "image-alt"],
+        "isHovered": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavCard$1);
+            }
+            break;
+    } });
+}
+
+const AfNavCard = AfNavCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavCard, defineCustomElement };
+//# sourceMappingURL=af-nav-card.js.map
+
+//# sourceMappingURL=af-nav-card.js.map

package/dist/components/af-nav-card.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-card.js","mappings":";;AAAA,MAAM,YAAY,GAAG,47BAA47B;;MCmBp8BA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAqBE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAEpB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAuCF;IArCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,MAAM,OAAO,IACX,WACE,KAAK,EAAE,OAAO,EACd,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAEnC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EACzB,EAAA,IAAI,CAAC,QAAQ,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,EAAG,CAAA,CACnE,CACG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,KACX,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACG,CACF,CACP;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,WAAW,EAClC,EAAA,OAAO,CACN,CACC;;QAIX,OAAO,CAAC,CAAA,IAAI,EAAE,IAAA,EAAA,OAAO,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNavCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-nav-card/af-nav-card.css?tag=af-nav-card&encapsulation=shadow","src/components/af-nav-card/af-nav-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n/* Card container */\n.nav-card {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 290px;\n  height: 360px;\n  min-height: 360px;\n  border-radius: var(--radii-image, 16px);\n  overflow: hidden;\n  justify-content: flex-end;\n  transition: transform 0.2s ease;\n}\n\n.nav-card.is-hovered {\n  transform: scale(1.02);\n}\n\n/* Image container */\n.image-container {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n/* Gradient overlay */\n.overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);\n  padding: 80px 24px 24px 24px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n/* Heading */\n.heading {\n  margin: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 24px;\n  line-height: 1.2;\n  letter-spacing: -0.48px;\n  color: #ffffff;\n  width: 100%;\n}\n\n.nav-card.is-hovered .heading {\n  text-decoration: underline;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * A navigation card component for featured article content in mega-menu dropdowns.\n * Displays an image with a gradient overlay and headline text.\n * \n * **Usage:**\n * - Place in the `sidebar` slot of NavMenuNest\n * - Provide imageSrc, heading, and href props\n * \n * **Hover behavior:**\n * - Slight scale effect (1.02)\n * - Headline underline\n */\n@Component({\n  tag: 'af-nav-card',\n  styleUrl: 'af-nav-card.css',\n  shadow: true\n})\nexport class AfNavCard {\n  /**\n   * The headline text displayed over the image\n   */\n  @Prop() heading?: string;\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Image source URL for the background\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Alternative text for the image\n   */\n  @Prop() imageAlt: string = '';\n\n  @State() isHovered: boolean = false;\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  render() {\n    const classes = {\n      'nav-card': true,\n      'is-hovered': this.isHovered\n    };\n\n    const content = (\n      <div\n        class={classes}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <div class=\"image-container\">\n          {this.imageSrc && (\n            <img src={this.imageSrc} alt={this.imageAlt} class=\"card-image\" />\n          )}\n        </div>\n        <div class=\"overlay\">\n          {this.heading && (\n            <h3 class=\"heading\">{this.heading}</h3>\n          )}\n        </div>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"card-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"],"version":3}

package/dist/components/af-nav-item.js

@@ -1,4 +1,4 @@
-import { A as AfNavItem$1, d as defineCustomElement$1 } from './p-BekWfVfB.js';
+import { A as AfNavItem$1, d as defineCustomElement$1 } from './p-Bh4YP9vE.js';
 
 const AfNavItem = AfNavItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-nav-menu-nest.d.ts

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

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

@@ -0,0 +1,67 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+
+const afNavMenuNestCss = ":host{display:inline-block}.nav-menu-nest{display:inline-flex;background:var(--colour-background-base, #ffffff);border-radius:32px}.nav-menu-nest.breakpoint-desktop{flex-direction:row;align-items:stretch}.nav-menu-nest.breakpoint-desktop .menu-columns{display:flex;flex-direction:row;gap:32px;padding:24px 0 32px 40px}.nav-menu-nest.breakpoint-desktop .menu-sidebar{display:flex;flex-direction:column;padding:24px 40px 32px 32px}.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-menu){padding-top:16px}.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-card){margin-top:16px}.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu){border-right:1px solid var(--colour-background-border-subtle, #e8eeed);padding-right:32px;padding-top:16px}.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type){border-right:none;padding-right:0}:host([show-sidebar-border]) .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type){border-right:1px solid var(--colour-background-border-heavy, #c6d5d1);padding-right:32px}.nav-menu-nest.breakpoint-mobile{flex-direction:column;border-radius:0}.nav-menu-nest.breakpoint-mobile .menu-columns{display:flex;flex-direction:column}.nav-menu-nest.breakpoint-mobile .menu-sidebar{display:flex;flex-direction:column;padding:32px 12px;border-top:1px solid var(--colour-background-border-subtle, #e8eeed)}.nav-menu-nest.breakpoint-mobile .menu-columns ::slotted(af-nav-menu){border-right:none;border-bottom:1px solid var(--colour-background-border-subtle, #e8eeed)}";
+
+const AfNavMenuNest$1 = /*@__PURE__*/ proxyCustomElement(class AfNavMenuNest extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The type/variant of the mega-menu
+         * - 'solutions': Multi-column layout (3 columns + sidebar)
+         * - 'solutions-alt': Alternative solutions layout
+         * - 'resources': Multi-column layout with optional featured card
+         * - 'pricing': Simpler layout without sidebar
+         */
+        this.type = 'solutions';
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Horizontal multi-column layout
+         * - 'mobile': Vertical stacked layout
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Whether to show the heavier border on the last column (before sidebar).
+         * Set to `true` when sidebar has content, `false` when no sidebar.
+         * When `false`, the last column has no border.
+         */
+        this.showSidebarBorder = true;
+    }
+    render() {
+        const classes = {
+            'nav-menu-nest': true,
+            [`type-${this.type}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true
+        };
+        return (h(Host, { key: '238b95cdf9c910302351b6dc07fb8c4dff386168' }, h("div", { key: '7cc941c220c635d6d22520d792122eaad98864ca', class: classes }, h("div", { key: 'b5437b4a10a1bc01ff23117e56928a96ed8e1f9e', class: "menu-columns" }, h("slot", { key: 'ab9d8520730622ee52c8d8d095d6bd5ef0b10419' })), h("div", { key: '1a859f0c957850a52fc4c24873bc4960ad8a96f3', class: "menu-sidebar" }, h("slot", { key: 'ca7ed122f10996d06bce10c6d80281283ef12a62', name: "sidebar" })))));
+    }
+    static get style() { return afNavMenuNestCss; }
+}, [257, "af-nav-menu-nest", {
+        "type": [1],
+        "breakpoint": [1],
+        "showSidebarBorder": [516, "show-sidebar-border"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-menu-nest"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-menu-nest":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavMenuNest$1);
+            }
+            break;
+    } });
+}
+
+const AfNavMenuNest = AfNavMenuNest$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavMenuNest, defineCustomElement };
+//# sourceMappingURL=af-nav-menu-nest.js.map
+
+//# sourceMappingURL=af-nav-menu-nest.js.map

package/dist/components/af-nav-menu-nest.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-menu-nest.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,kjDAAkjD;;MC0B9jDA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;;AAMG;AACK,QAAA,IAAI,CAAA,IAAA,GAA4D,WAAW;AAEnF;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACsB,QAAA,IAAiB,CAAA,iBAAA,GAAY,IAAI;AAsB3D;IApBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNavMenuNest","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-nav-menu-nest/af-nav-menu-nest.css?tag=af-nav-menu-nest&encapsulation=shadow","src/components/af-nav-menu-nest/af-nav-menu-nest.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.nav-menu-nest {\n  display: inline-flex;\n  background: var(--colour-background-base, #ffffff);\n  border-radius: 32px;\n}\n\n/* Desktop layout */\n.nav-menu-nest.breakpoint-desktop {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-columns {\n  display: flex;\n  flex-direction: row;\n  gap: 32px;\n  padding: 24px 0 32px 40px;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-sidebar {\n  display: flex;\n  flex-direction: column;\n  padding: 24px 40px 32px 32px;\n}\n\n/* Slotted content in sidebar - match column spacing */\n.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-menu) {\n  padding-top: 16px;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-card) {\n  margin-top: 16px;\n}\n\n/* Slotted NavMenu in columns - add border and spacing */\n.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu) {\n  border-right: 1px solid var(--colour-background-border-subtle, #e8eeed);\n  padding-right: 32px;\n  padding-top: 16px;\n}\n\n/* Last NavMenu in columns - no border by default */\n.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n  border-right: none;\n  padding-right: 0;\n}\n\n/* When showSidebarBorder is true, last column gets heavier border */\n:host([show-sidebar-border]) .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n  border-right: 1px solid var(--colour-background-border-heavy, #c6d5d1);\n  padding-right: 32px;\n}\n\n/* Mobile layout */\n.nav-menu-nest.breakpoint-mobile {\n  flex-direction: column;\n  border-radius: 0;\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-columns {\n  display: flex;\n  flex-direction: column;\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-sidebar {\n  display: flex;\n  flex-direction: column;\n  padding: 32px 12px;\n  border-top: 1px solid var(--colour-background-border-subtle, #e8eeed);\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-columns ::slotted(af-nav-menu) {\n  border-right: none;\n  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A mega-menu dropdown panel component.\n * Acts as a container for NavMenu columns and optionally a sidebar.\n * Used as the dropdown content for navbar items.\n * \n * **Slots:**\n * - default: Place NavMenu components here - they will be displayed as columns\n * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)\n * \n * **Example:**\n * ```html\n * <af-nav-menu-nest type=\"solutions\" breakpoint=\"desktop\">\n *   <af-nav-menu heading=\"Industries\">...</af-nav-menu>\n *   <af-nav-menu heading=\"Use Cases\">...</af-nav-menu>\n *   <af-nav-menu heading=\"Documents\">...</af-nav-menu>\n *   <af-nav-menu slot=\"sidebar\" heading=\"Resume Parser\">...</af-nav-menu>\n * </af-nav-menu-nest>\n * ```\n */\n@Component({\n  tag: 'af-nav-menu-nest',\n  styleUrl: 'af-nav-menu-nest.css',\n  shadow: true\n})\nexport class AfNavMenuNest {\n  /**\n   * The type/variant of the mega-menu\n   * - 'solutions': Multi-column layout (3 columns + sidebar)\n   * - 'solutions-alt': Alternative solutions layout\n   * - 'resources': Multi-column layout with optional featured card\n   * - 'pricing': Simpler layout without sidebar\n   */\n  @Prop() type: 'solutions' | 'solutions-alt' | 'resources' | 'pricing' = 'solutions';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Horizontal multi-column layout\n   * - 'mobile': Vertical stacked layout\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the heavier border on the last column (before sidebar).\n   * Set to `true` when sidebar has content, `false` when no sidebar.\n   * When `false`, the last column has no border.\n   */\n  @Prop({ reflect: true }) showSidebarBorder: boolean = true;\n\n  render() {\n    const classes = {\n      'nav-menu-nest': true,\n      [`type-${this.type}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"menu-columns\">\n            <slot></slot>\n          </div>\n          <div class=\"menu-sidebar\">\n            <slot name=\"sidebar\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/af-nav-menu.d.ts

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

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

@@ -0,0 +1,66 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+
+const afNavMenuCss = ":host{display:block}.nav-menu{display:flex;flex-direction:column;gap:16px;align-items:flex-start;min-height:1px;min-width:1px}.nav-menu.breakpoint-desktop{padding:0;flex:1 0 0;align-self:stretch}.nav-menu.breakpoint-desktop.has-border{border-right:1px solid var(--colour-background-border-subtle, #e8eeed);padding-right:32px;padding-top:16px}.nav-menu.breakpoint-mobile{padding:32px 12px;width:100%;border-bottom:1px solid var(--colour-background-border-subtle, #e8eeed)}.menu-header{display:flex;gap:16px;align-items:center;width:100%}.menu-heading{margin:0;font-family:var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--font-weight-book, 500);font-size:20px;line-height:1.2;letter-spacing:-0.4px;color:var(--colour-typography-heading-secondary, #8a7049);flex:1 0 0;min-height:1px;min-width:1px}.nav-menu.breakpoint-mobile .menu-heading{line-height:1.1}.menu-items{display:flex;flex-direction:column;align-items:flex-start;width:100%}.nav-menu.breakpoint-mobile .menu-items{padding-left:24px}::slotted(af-nav-item){width:100%}.nav-menu.card-style{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--radii-card-level-1, 32px);padding:40px}.nav-menu.card-style.breakpoint-desktop{flex:1 0 0;align-self:stretch}";
+
+const AfNavMenu$1 = /*@__PURE__*/ proxyCustomElement(class AfNavMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Desktop-specific styles (right border, horizontal padding)
+         * - 'mobile': Mobile-specific styles (bottom border, vertical layout)
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Whether to show the right border separator.
+         * When used inside NavMenuNest, borders are controlled by the parent.
+         * Set to true only when using NavMenu standalone.
+         */
+        this.showBorder = false;
+        /**
+         * Whether to display as a card with background color and rounded corners.
+         * Used for highlighted sidebar menus (e.g., solutions-alt variant).
+         */
+        this.cardStyle = false;
+    }
+    render() {
+        const classes = {
+            'nav-menu': true,
+            [`breakpoint-${this.breakpoint}`]: true,
+            'has-border': this.showBorder,
+            'card-style': this.cardStyle
+        };
+        return (h(Host, { key: '25d24de982df9e0bb085023f15a0ccc99dd68987' }, h("div", { key: 'c473e5e58df5a6300bc9f7087b4ed98126d2c178', class: classes }, this.heading && (h("div", { key: '6f080b0dd068463bde77f72a0b07dace7af4a248', class: "menu-header" }, h("h3", { key: '77f1ac6ecb8c877dc6d3b6bb0e1a37617f322175', class: "menu-heading" }, this.heading))), h("div", { key: 'f8cf91ec5aa5b31e8171d98a7c7e5c4e1e977f5e', class: "menu-items" }, h("slot", { key: 'd7bd3a85725fc817c2d9110cc315d5b57837c636' })))));
+    }
+    static get style() { return afNavMenuCss; }
+}, [257, "af-nav-menu", {
+        "heading": [1],
+        "breakpoint": [1],
+        "showBorder": [4, "show-border"],
+        "cardStyle": [516, "card-style"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavMenu$1);
+            }
+            break;
+    } });
+}
+
+const AfNavMenu = AfNavMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavMenu, defineCustomElement };
+//# sourceMappingURL=af-nav-menu.js.map
+
+//# sourceMappingURL=af-nav-menu.js.map

package/dist/components/af-nav-menu.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-menu.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wvCAAwvC;;MCWhwCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAWE;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;;AAGG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAyBpD;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;YACvC,YAAY,EAAE,IAAI,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,IAAI,CAAC,OAAO,KACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNavMenu","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-nav-menu/af-nav-menu.css?tag=af-nav-menu&encapsulation=shadow","src/components/af-nav-menu/af-nav-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.nav-menu {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  align-items: flex-start;\n  min-height: 1px;\n  min-width: 1px;\n}\n\n/* Desktop styles */\n.nav-menu.breakpoint-desktop {\n  padding: 0;\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n/* Border is now controlled by parent NavMenuNest via ::slotted()\n   Use showBorder prop only when NavMenu is used standalone */\n.nav-menu.breakpoint-desktop.has-border {\n  border-right: 1px solid var(--colour-background-border-subtle, #e8eeed);\n  padding-right: 32px;\n  padding-top: 16px;\n}\n\n/* Mobile styles */\n.nav-menu.breakpoint-mobile {\n  padding: 32px 12px;\n  width: 100%;\n  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);\n}\n\n/* Menu header */\n.menu-header {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  width: 100%;\n}\n\n.menu-heading {\n  margin: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 20px;\n  line-height: 1.2;\n  letter-spacing: -0.4px;\n  color: var(--colour-typography-heading-secondary, #8a7049);\n  flex: 1 0 0;\n  min-height: 1px;\n  min-width: 1px;\n}\n\n/* Mobile heading adjustments */\n.nav-menu.breakpoint-mobile .menu-heading {\n  line-height: 1.1;\n}\n\n/* Menu items container */\n.menu-items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n}\n\n/* Mobile items with left padding */\n.nav-menu.breakpoint-mobile .menu-items {\n  padding-left: 24px;\n}\n\n/* Slot styling for nav-items */\n::slotted(af-nav-item) {\n  width: 100%;\n}\n\n/* Card style variant - adds background and rounded corners */\n.nav-menu.card-style {\n  background: var(--colour-background-level-1, #e8eeed);\n  border-radius: var(--radii-card-level-1, 32px);\n  padding: 40px;\n}\n\n.nav-menu.card-style.breakpoint-desktop {\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A grouped navigation menu component with a heading.\n * Used in mega-menu dropdowns to group related navigation items.\n */\n@Component({\n  tag: 'af-nav-menu',\n  styleUrl: 'af-nav-menu.css',\n  shadow: true\n})\nexport class AfNavMenu {\n  /**\n   * The heading text displayed above the navigation items\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles (right border, horizontal padding)\n   * - 'mobile': Mobile-specific styles (bottom border, vertical layout)\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the right border separator.\n   * When used inside NavMenuNest, borders are controlled by the parent.\n   * Set to true only when using NavMenu standalone.\n   */\n  @Prop() showBorder: boolean = false;\n\n  /**\n   * Whether to display as a card with background color and rounded corners.\n   * Used for highlighted sidebar menus (e.g., solutions-alt variant).\n   */\n  @Prop({ reflect: true }) cardStyle: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-menu': true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'has-border': this.showBorder,\n      'card-style': this.cardStyle\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"menu-header\">\n              <h3 class=\"menu-heading\">{this.heading}</h3>\n            </div>\n          )}\n          <div class=\"menu-items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/af-navbar.js

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

package/dist/components/af-number-badge.d.ts

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

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

@@ -0,0 +1,66 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.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: '8b3d22147d452da450899cb2853957d601d321cb', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'de26b2d9ad6139ecb2ebe764020577f9887ececf', 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;
+    } });
+}
+
+const AfNumberBadge = AfNumberBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNumberBadge, defineCustomElement };
+//# sourceMappingURL=af-number-badge.js.map
+
+//# sourceMappingURL=af-number-badge.js.map

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

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

package/dist/components/af-progress-line.d.ts

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

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

@@ -0,0 +1,9 @@
+import { A as AfProgressLine$1, d as defineCustomElement$1 } from './p-wwnR-hlX.js';
+
+const AfProgressLine = AfProgressLine$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfProgressLine, defineCustomElement };
+//# sourceMappingURL=af-progress-line.js.map
+
+//# sourceMappingURL=af-progress-line.js.map