@affinda/wc 0.1.0 → 0.3.0

package/dist/cjs/af-hero.cjs.entry.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./index-BzZA0USq.js');
+
+const afHeroCss = ".sc-af-hero-h{display:block;position:relative;width:100%;--af-hero-image-lift:-260px;--af-hero-image-min-height:360px}.hero__section.sc-af-hero{position:relative;overflow:hidden}.hero__paperclip.sc-af-hero{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none;z-index:0;width:655px;height:754px}@media (max-width: 991px){.hero__paperclip.sc-af-hero{width:480px;height:552px}}@media (max-width: 767px){.hero__paperclip.sc-af-hero{display:none}}.hero__inner.sc-af-hero{position:relative;z-index:1;padding-bottom:40px}.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:124px}.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:164px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:80px}.hero__grid.sc-af-hero{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr auto;gap:48px}.hero__copy.sc-af-hero{padding-left:16px}.hero--inkwell-photo.hero--pad-loose.sc-af-hero-h .hero__copy.sc-af-hero{padding-bottom:120px}.hero--inkwell-centered.sc-af-hero-h .hero__copy.sc-af-hero{padding-left:0;text-align:center}.hero__badge.sc-af-hero:not(:has(*)){display:none}.hero__badge.sc-af-hero:has(*){margin-bottom:16px}.hero__copy.sc-af-hero-s>[slot='badge'],.hero__copy .sc-af-hero-s>[slot='badge']{display:inline-block}.hero__buttons.sc-af-hero{margin-top:32px}.hero__buttons.sc-af-hero:empty{display:none}.hero--inkwell-centered.sc-af-hero-h .hero__buttons.sc-af-hero{display:flex;justify-content:center}.sc-af-hero-h{--af-hero-blob-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');--af-hero-blob-mask-mobile:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>')}.hero__image.sc-af-hero{min-height:var(--af-hero-image-min-height);overflow:visible;margin-top:var(--af-hero-image-lift);position:relative;z-index:1}.hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero__image--masked.sc-af-hero-s>picture img,.hero__image--masked .sc-af-hero-s>picture img,.hero__image--masked.sc-af-hero-s>.af-hero-image,.hero__image--masked .sc-af-hero-s>.af-hero-image{display:block;width:100%;height:auto;-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__illustration.sc-af-hero{flex:0 0 auto;width:100%;max-width:432px;line-height:0;justify-self:end}.hero__illustration.sc-af-hero-s>svg,.hero__illustration .sc-af-hero-s>svg,.hero__illustration.sc-af-hero-s>img,.hero__illustration .sc-af-hero-s>img{width:100%;height:auto;display:block;border-radius:16px}.hero--inkwell-illustration.sc-af-hero-h .hero__illustration.sc-af-hero{max-width:none}.hero__logos.sc-af-hero{position:relative;z-index:2}.hero__logos.sc-af-hero:not(:has(*)){display:none}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:-240px;padding-top:48px;padding-bottom:48px;background:var(--af-background-base, var(--colour-brand-inkwell, #14343b));border-top:1px solid\n    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45))}@media (max-width: 991px){.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero,.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:112px}.hero__grid.sc-af-hero{grid-template-columns:1fr;gap:32px}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr}.hero__copy.sc-af-hero{padding-left:0;padding-bottom:0}.hero__illustration.sc-af-hero{max-width:360px;margin-inline:auto;justify-self:center}.hero__image.sc-af-hero{margin-top:0;min-height:auto}.sc-af-hero-h.hero--inkwell-photo .hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero--inkwell-photo.sc-af-hero-h .hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask-mobile);mask-image:var(--af-hero-blob-mask-mobile)}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:24px;padding-top:32px;padding-bottom:32px;background:transparent;border-top:none}}";
+
+/**
+ * Map each variant to its underlying section theme token. Keeps one source
+ * of truth instead of having consumers spell the theme twice.
+ */
+const VARIANT_THEMES = {
+    'inkwell-photo': 'inkwell',
+    'inkwell-illustration': 'inkwell',
+    'inkwell-centered': 'inkwell',
+    'soft-clay-illustration': 'soft-clay',
+    'mist-green-illustration': 'mist-green',
+};
+const AfHero = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Layout / theme preset. See variant docs in the component header. */
+        this.variant = 'inkwell-photo';
+        /** Heading text (use the default slot for richer markup). */
+        this.heading = '';
+        /** Description text (use the `description` slot for richer markup). */
+        this.description = '';
+        /**
+         * Top padding preset. `default` = 124px (matches IndustryHero /
+         * IllustrationHero). `loose` = 164px (matches ListingHero — gives the
+         * image a touch more breathing room above the lockup on archive pages).
+         */
+        this.topPad = 'default';
+        /** Typography lockup max-width (px). Defaults to 620, matching the live site. */
+        this.maxWidth = 620;
+        /**
+         * Whether to apply the blob mask to the slotted `image`. Defaults to
+         * `true` for `inkwell-photo`. Set `false` if you want to slot in a
+         * pre-masked raster or a custom wrapper.
+         */
+        this.maskImage = true;
+    }
+    get resolvedFloatNavbar() {
+        if (typeof this.floatNavbar === 'boolean')
+            return this.floatNavbar;
+        return (this.variant === 'inkwell-photo' ||
+            this.variant === 'inkwell-illustration' ||
+            this.variant === 'inkwell-centered');
+    }
+    get theme() {
+        return VARIANT_THEMES[this.variant];
+    }
+    connectedCallback() {
+        if (this.resolvedFloatNavbar && typeof document !== 'undefined') {
+            document.body.setAttribute('data-af-hero-float-navbar', 'true');
+        }
+    }
+    disconnectedCallback() {
+        if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {
+            document.body.removeAttribute('data-af-hero-float-navbar');
+        }
+    }
+    renderCopy() {
+        const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';
+        return (index.h("div", { class: "hero__copy" }, index.h("div", { class: "hero__badge" }, index.h("slot", { name: "badge" })), index.h("af-typography-lockup", { "heading-size": "1", "text-alignment": alignment, "max-width": String(this.maxWidth) }, this.heading ? index.h("h1", null, this.heading) : index.h("slot", null), this.description ? (index.h("span", { slot: "description" }, this.description)) : (index.h("slot", { name: "description", slot: "description" }))), index.h("div", { class: "hero__buttons" }, index.h("slot", { name: "buttons" }))));
+    }
+    renderPhoto() {
+        return (index.h("div", { class: {
+                hero__image: true,
+                'hero__image--masked': this.maskImage,
+            } }, index.h("slot", { name: "image" })));
+    }
+    renderIllustration() {
+        return (index.h("div", { class: "hero__illustration" }, index.h("slot", { name: "illustration" })));
+    }
+    render() {
+        const v = this.variant;
+        const centered = v === 'inkwell-centered';
+        const hasImage = v === 'inkwell-photo';
+        const hasIllustration = v === 'inkwell-illustration' ||
+            v === 'soft-clay-illustration' ||
+            v === 'mist-green-illustration';
+        return (index.h(index.Host, { key: '6e8e522c6593a79fbb93eaf421c6b3f41a2072f5', class: {
+                [`hero--${v}`]: true,
+                [`hero--pad-${this.topPad}`]: true,
+                [`hero--theme-${this.theme}`]: true,
+                'hero--float-navbar': this.resolvedFloatNavbar,
+            } }, index.h("af-section", { key: 'dc6181658d53a8c7166d3f090df9666d35310338', theme: this.theme, padding: "none", container: false, class: "hero__section" }, centered && (index.h("div", { key: 'b8357ea1cc08dafa3a3f5e4cd8c545bef1e3df1c', class: "hero__paperclip", "aria-hidden": "true" }, index.h("slot", { key: 'da4b0dcb83e6e8c09b9962ba7d0c09e02f6721c5', name: "paperclip" }))), index.h("af-container", { key: '0dbffc963a56e53ed7206b59cccfd74f5bd792ee', class: "hero__inner" }, centered ? (this.renderCopy()) : (index.h("div", { class: "hero__grid" }, this.renderCopy(), hasImage && this.renderPhoto(), hasIllustration && this.renderIllustration()))), index.h("div", { key: 'd4316dbc5ba954ce2a52d73dfb73575b77f394db', class: "hero__logos" }, index.h("slot", { key: 'd9ff55a2c238d5db322aef90cb28006d91f7dffc', name: "logos-below" })))));
+    }
+    get el() { return index.getElement(this); }
+};
+AfHero.style = afHeroCss;
+
+exports.af_hero = AfHero;
+//# sourceMappingURL=af-hero.entry.cjs.js.map

package/dist/cjs/af-hero.entry.cjs.js.map

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

package/dist/cjs/af-icon-box.cjs.entry.js

@@ -21,7 +21,7 @@ const AfIconBox = class {
             [`icon-box--size-${this.size}`]: true,
         };
         const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
-        return (index.h(index.Host, { key: 'e270fbfc75794a1bc2fce141cde5e6295d13c80c' }, index.h("div", { key: '3533c3e5afe2aaf1ee0227ffe9d37323b954753f', class: containerClasses }, index.h("af-icon", { key: 'e692e0110fb1233ced5d29f7b8f612c0ab89e058', name: this.icon, size: iconSize }))));
+        return (index.h(index.Host, { key: '59cf379ff62d3a5ed7fd7398f240976a023d1f8a' }, index.h("div", { key: '9fc4e502df8da3cf2112702cd2216a8c7a03a21f', class: containerClasses }, index.h("af-icon", { key: '8bc89de5589f531829a8377862c7b1bda4c7ce60', name: this.icon, size: iconSize }))));
     }
 };
 AfIconBox.style = afIconBoxCss;

package/dist/cjs/af-icon-text.cjs.entry.js

@@ -27,7 +27,7 @@ const AfIconText = class {
             'icon-text': true,
             [`icon-text--${this.orientation}`]: true,
         };
-        return (index.h(index.Host, { key: '5ee5ddd91804507b0e4029adeee9eebb687448d9' }, index.h("div", { key: '5c00e4451c12aeaf924c2d9dff3ad85cb5555813', class: containerClasses }, index.h("af-icon-box", { key: 'd375fa1087651f86fd778744c276bd92e387b297', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), index.h("af-typography-lockup", { key: '2be428ff1b3210972248ef741086d96eb6829cb9', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, index.h("slot", { key: '0da48d34ee2d1ab77c2aac80daffdbce4b2774b1' }), index.h("span", { key: '140db3a089b16211db54b67b786a90795dbe3d8a', slot: "description" }, index.h("slot", { key: '37d6b87dc348b95c5178e9a04e902f04664a0feb', name: "description" })), index.h("span", { key: '10031a47ef045d9ad95cb1bb90289fa1d599bc35', slot: "buttons" }, index.h("slot", { key: 'decf43947df87a58f42d10ba5025e9c6e1149ca2', name: "buttons" }))))));
+        return (index.h(index.Host, { key: '439c52c428eb8bdd4a1d89143a3e1f3b1f1ae272' }, index.h("div", { key: 'ff0edf1e55f225abc3a31e928d08388cae6209e2', class: containerClasses }, index.h("af-icon-box", { key: '8a88ed7babd257ce508c90139b3d431b80aa9d32', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), index.h("af-typography-lockup", { key: 'b1d4722558f9f27daccfeb7e5efe954f0af3ece0', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, index.h("slot", { key: '02ab65533f8d40c24b46082271b06c7acac914db' }), index.h("span", { key: '3d0556c8b0f5b3d262c44efcb271541d74f46535', slot: "description" }, index.h("slot", { key: '155f5bfba6ac9a9e58ba3b4bec1d736b995c327d', name: "description" })), index.h("span", { key: '8fb65696a03bed3776953fc1b51c077b12030837', slot: "buttons" }, index.h("slot", { key: 'bc30a8813ec47e8a265282f841e30bbabfe1f06f', name: "buttons" }))))));
     }
 };
 AfIconText.style = afIconTextCss;

package/dist/cjs/af-illustrated-card.cjs.entry.js

@@ -27,7 +27,7 @@ const AfIllustratedCard = class {
             [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
             [`illustrated-card--size-${this.cardSize}`]: true,
         };
-        return (index.h(index.Host, { key: 'afe7b84219cbe07a6949825042295def34dafe5e' }, index.h("div", { key: '9b5697ca0732d5bc5ac8170869bf04db5c3e9b07', class: wrapperClasses }, index.h("af-card", { key: '0de8d7d93eb225298664e9edcd7efec821c341c6', theme: this.theme }, index.h("div", { key: '4a691832606f011d996f005c533f423acc960ea2', class: "illustrated-card__content" }, index.h("af-typography-lockup", { key: '59d8417922cffd552df7610b72b4f2ec6c222105', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, index.h("slot", { key: 'ee18abb24d0637f3bea71b48ccafdd3c6df0ea45' }), index.h("span", { key: 'be0bebfef478da4491ba1137ba1975052f4dcb5c', slot: "description" }, index.h("slot", { key: 'b05c91bd5d5085f74d94fabd22d8b79a2b008719', name: "body" })), index.h("span", { key: '79c1f836418dd6d2d2c96a1ea680bf05ade2b0d8', slot: "buttons" }, index.h("slot", { key: '03a5aff63f8225bf2323abe44e8e830562cf0c6c', name: "buttons" })))), index.h("div", { key: '1c75154af4e7cc89eceda3f16a958ca720f17450', class: "illustrated-card__illustration-area" }, index.h("slot", { key: '46071088a5aad6cbf64635a3961aa78e1f7b3fee', name: "illustration" }))))));
+        return (index.h(index.Host, { key: 'ef2bef2685ff1c476d6cdffcac8dba7d8bb0f9e9' }, index.h("div", { key: '7a9fab8ac214d2715b2f96186e4cbb2978b53137', class: wrapperClasses }, index.h("af-card", { key: '9967cb01f648bb29b33743d50f733c21883ae6fd', theme: this.theme }, index.h("div", { key: 'eb791121145c80101fdb5109636a990de735074f', class: "illustrated-card__content" }, index.h("af-typography-lockup", { key: 'f5f39cc0cfa368df8cd8f44b4f259af6dcf25fdb', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, index.h("slot", { key: '0ed9b6ef9c8af21b239d505bd4a55f19d6aff418' }), index.h("span", { key: '1e7af14cfbd40cedf7c4cacc67d0232560ca6a18', slot: "description" }, index.h("slot", { key: '1a63ad36fd61d5140201c0d62a37e36dad5470a3', name: "body" })), index.h("span", { key: '9fe3673d3aee02dae3f2d541a332a68e37794427', slot: "buttons" }, index.h("slot", { key: '932d6a3ca09ef215818dfca3353ceca2764b3ac2', name: "buttons" })))), index.h("div", { key: 'ceb3132f1986c70766e897aad8c71b155eb3d84e', class: "illustrated-card__illustration-area" }, index.h("slot", { key: '1b2456a9b4a87823832555b0836381336e44ee83', name: "illustration" }))))));
     }
 };
 AfIllustratedCard.style = afIllustratedCardCss;

package/dist/cjs/af-illustrated-card.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-illustrated-card.entry.cjs.js","sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  /* Override card atom defaults - illustrated card handles its own spacing */\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* ==========================================================================\n   Base Illustrated Card Styles\n   ========================================================================== */\n\n.illustrated-card {\n  min-height: 400px;\n}\n\n/* ==========================================================================\n   Content Area\n   ========================================================================== */\n\n.illustrated-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Desktop default size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n  padding: 40px 32px 12px 32px;\n}\n\n/* Desktop large size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* Mobile spacing */\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n  padding: 32px 24px 12px 24px;\n}\n\n/* ==========================================================================\n   Illustration Area\n   ========================================================================== */\n\n.illustrated-card__illustration-area {\n  position: relative;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  box-sizing: border-box;\n}\n\n/* Desktop illustration area height */\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n  min-height: 160px;\n}\n\n/* Mobile illustration area height */\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n  min-height: 192px;\n}\n\n/* Illustration placeholder for when using data attributes */\n.illustrated-card__illustration-placeholder {\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Illustration image styling. The inner image gets the same corner radius\n * (radius-lg / 20px) as the outer af-card so art with a photographic edge\n * stays within the card's rounded frame. Consumers of af-illustrated-card\n * previously hand-rolled this value; it now comes from the token ladder. */\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n  max-width: 100%;\n  max-height: 200px;\n  height: auto;\n  object-fit: contain;\n  border-radius: var(--radius-lg, 20px);\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n/* Pass theme colors to typography lockup */\n.illustrated-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary);\n  --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n *\n * Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n *\n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n *\n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonLayout=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n                <span slot=\"buttons\">\n                  <slot name=\"buttons\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,w6DAAw6D;;MCqBx7D,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;AAwClD;IAtCC,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;QAED,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxBA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU,EAAA,EAEvBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;"}
+{"version":3,"file":"af-illustrated-card.entry.cjs.js","sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  /* Override card atom defaults - illustrated card handles its own spacing */\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* ==========================================================================\n   Base Illustrated Card Styles\n   ========================================================================== */\n\n.illustrated-card {\n  min-height: 400px;\n}\n\n/* ==========================================================================\n   Content Area\n   ========================================================================== */\n\n.illustrated-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Desktop default size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n  padding: 40px 32px 12px 32px;\n}\n\n/* Desktop large size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* Mobile spacing */\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n  padding: 32px 24px 12px 24px;\n}\n\n/* ==========================================================================\n   Illustration Area\n   ========================================================================== */\n\n.illustrated-card__illustration-area {\n  position: relative;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  box-sizing: border-box;\n}\n\n/* Desktop illustration area height */\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n  min-height: 160px;\n}\n\n/* Mobile illustration area height */\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n  min-height: 192px;\n}\n\n/* Illustration placeholder for when using data attributes */\n.illustrated-card__illustration-placeholder {\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Illustration image styling. The inner image gets the same corner radius\n * (radius-lg / 20px) as the outer af-card so art with a photographic edge\n * stays within the card's rounded frame. Consumers of af-illustrated-card\n * previously hand-rolled this value; it now comes from the token ladder. */\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n  max-width: 100%;\n  max-height: 200px;\n  height: auto;\n  object-fit: contain;\n  border-radius: var(--radius-lg, 20px);\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n/* Pass theme colors to typography lockup */\n.illustrated-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary);\n  --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n *\n * Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n *\n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n *\n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: Theme = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonLayout=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n                <span slot=\"buttons\">\n                  <slot name=\"buttons\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,w6DAAw6D;;MCsBx7D,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;AAwClD;IAtCC,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;QAED,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxBA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU,EAAA,EAEvBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;"}

package/dist/cjs/af-image.cjs.entry.js

@@ -19,7 +19,7 @@ const AfImage = class {
         this.shape = 'rounded';
     }
     render() {
-        return (index.h(index.Host, { key: 'c1d2a3fa4d205e24e5c55e9c84e8ff5b3150a161' }, index.h("div", { key: '5c77f95ebdfd2792ebfb55accc4ec0ea9da5953a', class: `image-container image-container--${this.shape}` }, index.h("img", { key: '1c9694ebb590d141e46267bb3217eda2400c5b23', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: '2505652d87a23db29d54705b93978f44794837b9', class: "image-border", "aria-hidden": "true" }))));
+        return (index.h(index.Host, { key: '9e6de616aae4375e3b2e734edd095f392aa8ef1b' }, index.h("div", { key: '69d0eb9902766ff13f04d85c4737a5d322e63417', class: `image-container image-container--${this.shape}` }, index.h("img", { key: 'cddfe6dedc57a63318d7a970747cda8641c4f83b', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: '23e0a9195e06da984aee8da6edc273a6367a7852', class: "image-border", "aria-hidden": "true" }))));
     }
 };
 AfImage.style = afImageCss;

package/dist/cjs/af-in-page-banner.cjs.entry.js

@@ -38,7 +38,7 @@ const AfInPageBanner = class {
         return (index.h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, index.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 (index.h(index.Host, { key: '1f14f0d7df4f632817b7e8c955b8249a5a3d2ce4' }, index.h("div", { key: '0fc90536d6d5b65912fca02d3c74019bee067133', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), index.h("div", { key: 'c70ea65d7536efbceb8fc3f2e6d714d56c2d5be9', class: "banner__illustration" }, this.illustrationUrl ? (index.h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (index.h("slot", { name: "illustration" }))), index.h("div", { key: 'c209db43fd9a559854b73268f7b8a19b7c1a3268', class: "banner__content" }, index.h("div", { key: '7b1898662500a54e7dbf500646017f43ffe21e23', class: "banner__copy" }, index.h("h2", { key: '443078b848ee5ca1725ab960fc844e0f5d106ef7', class: "banner__heading" }, index.h("slot", { key: '10ce17b8014571ec6bc61cbda03b3881f2741215', name: "heading" }, this.heading)), index.h("div", { key: '3c43d4d4dd4c4c708891fdd3398de996a7b08d04', class: "banner__description" }, index.h("slot", { key: 'd58a7f5d4bea7dc2e4ce1dee10a99f19753427b4', name: "description" }, this.description))), index.h("div", { key: 'c10df7f70cb8ac0dd0d5e63e34a6fbc8fef9c62f', class: "banner__buttons" }, index.h("slot", { key: 'ff5cf411dee854f14fdbecda0bc8aac4b01b4abf', name: "buttons" }, this.primaryButtonText && (index.h("af-button", { key: 'c8da6aa83a13a9b8a7e892de29b1914aa5ae41c1', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (index.h("af-button", { key: '42b8ba18fa9d15539ab2c80af98da504d8b14013', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (index.h(index.Host, { key: '6bea21791ecb2e68e63a757f5ecfdaa1f07b728d' }, index.h("div", { key: '2c5afc83dcdc9917ae0542d81c1de02abfdd90a6', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), index.h("div", { key: '8c646d4ea9d08a3a1c1bed729d09503cd7257ece', class: "banner__illustration" }, this.illustrationUrl ? (index.h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (index.h("slot", { name: "illustration" }))), index.h("div", { key: '77afe16ba80d1568869ab4a24dc75a65c49dab90', class: "banner__content" }, index.h("div", { key: 'dce08d53d206a7ccd358da11d337330dcf269d52', class: "banner__copy" }, index.h("h2", { key: '626df9e5fcbb345ff1f477191203343db10f2e52', class: "banner__heading" }, index.h("slot", { key: '5e6daf16162dffb58d9e4c61e91d226ba5fc35e7', name: "heading" }, this.heading)), index.h("div", { key: 'ef9dab42d2a03f3d7fdf0b8a4aed1bac5f104795', class: "banner__description" }, index.h("slot", { key: '3a4b3c7c474f00375c6ac49653713dec61f2a6f5', name: "description" }, this.description))), index.h("div", { key: 'af2f8c614c803b272fcac1ae83cbc3f3de908a4d', class: "banner__buttons" }, index.h("slot", { key: 'b047769e0807ad1915e28b174ef6122969ab52c6', name: "buttons" }, this.primaryButtonText && (index.h("af-button", { key: '46d8a79deb045a8ba2baf1625583f181af576157', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (index.h("af-button", { key: 'dde5d455151eac0b5abd2c45e920a1c45155145d', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
 };
 AfInPageBanner.style = afInPageBannerCss;

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

@@ -1 +1 @@
-{"version":3,"file":"af-in-page-banner.entry.cjs.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Banner Container\n\n   Design specs from Figma:\n   - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n   - Border radius: 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"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"af-in-page-banner.entry.cjs.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Banner Container\n\n   Design specs from Figma:\n   - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n   - Border radius: 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"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/af-inline.cjs.entry.js

@@ -49,7 +49,7 @@ const AfInline = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (index.h(index.Host, { key: '17b13c3b8a5ade7e5d3c990673b2e884b0ae5cb5', style: style }, index.h("slot", { key: 'ac563668c3e6e26f9a1b730c6edb16cb8cb46498' })));
+        return (index.h(index.Host, { key: '05c8a9c14341060f3e5f24397770740b09fee85c', style: style }, index.h("slot", { key: '871efa9e4e74690534375283878c8b0732f4859d' })));
     }
 };
 AfInline.style = afInlineCss;

package/dist/cjs/af-inline.entry.cjs.js.map

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

package/dist/cjs/af-logo-well.cjs.entry.js

@@ -9,7 +9,7 @@ const AfLogoWell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c0896e6345cc862d0cd7105117016a5dc76b3141' }, index.h("div", { key: 'a754bb9b44319040e9b1bcb03c6440c60c91af25', class: "logo-well" }, index.h("slot", { key: '8f87dc5de8caba94cc30a529aaa8e4c4426c5e81' }))));
+        return (index.h(index.Host, { key: 'b3abd933476da0e33ab6fcc4cd2f638fd8d3d69e' }, index.h("div", { key: '16d17b912cb38663ae6d2f71109a99cc5cb9ab08', class: "logo-well" }, index.h("slot", { key: '801820bb88b3af3ebb1f9514b2a8f1297b6d033c' }))));
     }
 };
 AfLogoWell.style = afLogoWellCss;

package/dist/cjs/af-nav-accordion-item.cjs.entry.js

@@ -84,11 +84,11 @@ const AfNavAccordionItem = class {
         // 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 (index.h(index.Host, { key: '6ec460cb9004968c1386dbd4987bdcbab85fc5ee', class: {
+        return (index.h(index.Host, { key: '514c8d8a02712f76eb9de767f6ab5c171f7cba8a', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, index.h("div", { key: '8cfae124103bff2dbefee2972080014069346d85', class: "nav-accordion-item" }, this.href ? (index.h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (index.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" }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'd1e430c8bf9bfbed5da2a647352d5166680beaee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, index.h("div", { key: '8fe35fe547bc1658e1cc1fd18b6ded85f4b8ddbc', class: "content", ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '550b245714af43a08024486dee8f1532624abe03' }))))));
+            } }, index.h("div", { key: 'c8e9e4d3cea27fe1ecdcb629f1525c1e3fb8c02a', class: "nav-accordion-item" }, this.href ? (index.h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (index.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" }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '4da5b93689a0dac535dca6233b3c9d2218d333c1', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, index.h("div", { key: '103be83255e80feef963f95566cb22c0ab4bb338', class: "content", ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '2f48b5257f7fdcaf30635dc178ff452cd4a176a0' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/af-nav-accordion.cjs.entry.js

@@ -72,7 +72,7 @@ const AfNavAccordion = class {
         this.syncItems();
     }
     render() {
-        return (index.h(index.Host, { key: '518288d29b17ac7ceb69ce24b37258dffefdd742', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, index.h("div", { key: '6a5e504a7114f3abbc064da71558342f9c45627d', class: "nav-accordion" }, index.h("slot", { key: '88560460c84396a492d2bc035f2d96c7c30afa58' }))));
+        return (index.h(index.Host, { key: 'a0c6718b375af88cefb975e997d70a228d1fb9aa', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, index.h("div", { key: '63b1716e6b40f7d73c9609a030b03af55a5db714', class: "nav-accordion" }, index.h("slot", { key: '48bb056a8e8cf39a47b20b8c54abbc7266f75765' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/af-nav-menu-nest.cjs.entry.js

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

package/dist/cjs/af-nav-menu.cjs.entry.js

@@ -32,7 +32,7 @@ const AfNavMenu = class {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (index.h(index.Host, { key: 'e52759061a3d6767cea4a543ded89fd79c6cbeb0' }, index.h("div", { key: '365abac4a6588998a94f4c45955157b24fdea8b4', class: classes }, this.heading && (index.h("div", { key: 'cb380719d52dd2da2d7559330ea806f47a6c4e99', class: "menu-header" }, index.h("h3", { key: '7b71a56e995645f8371f66d581b3626fbf2f5e31', class: "menu-heading" }, this.heading))), index.h("div", { key: 'cf2f7c5351ed8c26dcd82d1c420d225f623847f6', class: "menu-items" }, index.h("slot", { key: '45f38b469a9dabb7823b56d52538925a6db90f0e' })))));
+        return (index.h(index.Host, { key: '98d8c217eb9e952d4feb3928c69cae1559621092' }, index.h("div", { key: '3185c320e6ce6cff4c2630fc7492bbb2b34ef838', class: classes }, this.heading && (index.h("div", { key: '207eeef13c68e3ff26dcf2bbeee20574c7fab481', class: "menu-header" }, index.h("h3", { key: 'a2c6e28d60b2aeb49b96e99c57c853493b415a4c', class: "menu-heading" }, this.heading))), index.h("div", { key: 'f133eea0ed320467cd4840820251d09e2d98f49f', class: "menu-items" }, index.h("slot", { key: '91b640df3dd990f556d394056683ddd9fd26d6c3' })))));
     }
 };
 AfNavMenu.style = afNavMenuCss;

package/dist/cjs/af-number-badge.cjs.entry.js

@@ -30,7 +30,7 @@ const AfNumberBadge = class {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (index.h(index.Host, { key: '816770ea4351ba01a7c069b57558efad8015f5f8', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, index.h("span", { key: '33bd320ab7e56fbf29251035008e862b6a249258', class: {
+        return (index.h(index.Host, { key: '71d32d2c1b2c6abec25edab3fadc0343d7575aaa', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, index.h("span", { key: '4686c4e277d1557cb6c3945a52a7713d0fd1b021', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));

package/dist/cjs/af-numbered-stepper-item.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-BzZA0USq.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * 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 (index.h(index.Host, { key: '6aa07b74803b11d666b724fe2c96149860c58810', role: "listitem" }, index.h("div", { key: 'ddf3ea9200c5015dbefb53a2dc77ade6f634e24e', class: "numbered-stepper-item__marker-row", "aria-hidden": "true" }, index.h("af-number-badge", { key: 'b778abffa4a41bbea6728920c61e1f2d2155662a', class: "numbered-stepper-item__badge", number: clamped, variant: "inCircle", size: 40 }), index.h("span", { key: 'e3f74fb9b1bc4fe999095878bdbe10f47694f8d8', class: "numbered-stepper-item__connector" })), index.h("af-typography-lockup", { key: '6f4688fc503175db37d5a91fa626b43692e4858a', class: "numbered-stepper-item__lockup", "heading-size": "card", "text-alignment": "center" }, index.h("slot", { key: 'd628fb339348c23c988e4fb69bc647105d7041f6', name: "heading" }), index.h("span", { key: 'a5b58d21e44537de9c32b22a754e0f4a8ef96007', slot: "description" }, index.h("slot", { key: '17607c180f777c5f829ea9d9919c5a7187718f2d', name: "body" })))));
+    }
+};
+AfNumberedStepperItem.style = afNumberedStepperItemCss;
+
+exports.af_numbered_stepper_item = AfNumberedStepperItem;
+//# sourceMappingURL=af-numbered-stepper-item.entry.cjs.js.map

package/dist/cjs/af-numbered-stepper-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-numbered-stepper-item.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,4pGAA4pG;;MCsBhrG,qBAAqB,GAAA,MAAA;AANlC,IAAA,WAAA,CAAA,OAAA,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,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mCAAmC,EAAA,aAAA,EAAa,MAAM,EAAA,EAC/DA,OAAA,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,EACnBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kCAAkC,EAAA,CAAQ,CAClD,EACNA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,+BAA+B,EACxB,cAAA,EAAA,MAAM,oBACJ,QAAQ,EAAA,EAEvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,EAC5BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,CACc,CAClB;;;;;;;"}

package/dist/cjs/af-numbered-stepper.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var index = require('./index-BzZA0USq.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** 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 (index.h(index.Host, { key: 'a1df62f85981a64331d4b641074eaa54db04fef8', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, index.h("slot", { key: '2c1fbae6a474c883ce7eef49b79610882b401464' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AfNumberedStepper.style = afNumberedStepperCss;
+
+exports.af_numbered_stepper = AfNumberedStepper;
+//# sourceMappingURL=af-numbered-stepper.entry.cjs.js.map

package/dist/cjs/af-numbered-stepper.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-numbered-stepper.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,6bAA6b;;MCqC7c,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,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,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,CAAsC,mCAAA,EAAA,IAAI,CAAC,WAAW,CAAA,CAAE,EAC/D,IAAI,EAAC,MAAM,EAAA,EAEXD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}