@affinda/wc 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/affinda/af-hero.entry.esm.js.map +1 -1
  2. package/dist/affinda/affinda.esm.js +1 -1
  3. package/dist/affinda/index.esm.js +1 -1
  4. package/dist/affinda/p-9b9e81cf.entry.js +2 -0
  5. package/dist/affinda/{p-7d08db58.entry.js.map → p-9b9e81cf.entry.js.map} +1 -1
  6. package/dist/cjs/af-hero.cjs.entry.js +1 -1
  7. package/dist/cjs/af-hero.entry.cjs.js.map +1 -1
  8. package/dist/collection/components/af-hero/af-hero.css +27 -5
  9. package/dist/components/af-hero.js +1 -1
  10. package/dist/components/index.js +1 -1
  11. package/dist/components/{p-CVZQcdGR.js → p-D7xVlaes.js} +3 -3
  12. package/dist/components/{p-CVZQcdGR.js.map → p-D7xVlaes.js.map} +1 -1
  13. package/dist/esm/af-hero.entry.js +1 -1
  14. package/dist/esm/af-hero.entry.js.map +1 -1
  15. package/package.json +1 -1
  16. package/dist/affinda/p-7d08db58.entry.js +0 -2
package/dist/affinda/af-hero.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"af-hero.entry.esm.js","sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). */\n --af-hero-image-lift: -260px;\n /* Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. */\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- */\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n /* Default size — consumers can resize the slotted decoration via its\n own width/height props. */\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/* -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- */\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/* Centered variant uses slightly tighter top padding to match the live\n /platform hero (80px), since the lockup is typically tall. */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 80px;\n}\n\n/* -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- */\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n.hero__copy {\n /* Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. */\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. */\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n display: none;\n}\n\n.hero__badge:has(*) {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- */\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. */\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- */\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: none;\n}\n\n/* -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- */\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. */\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"af-hero.entry.esm.js","sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). */\n --af-hero-image-lift: -260px;\n /* Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. */\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- */\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n /* Default size — consumers can resize the slotted decoration via its\n own width/height props. */\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/* -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- */\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/* Centered variant: leave clear breathing room under the floating navbar\n pill so the heading isn't clipped at the top. The live affinda.com\n reference at 1280 vw renders the heading roughly 180 px below the\n viewport top — pad accordingly. (Earlier value of 80 px clipped the\n heading behind the navbar; caught by qa/regression-compare in the\n site repo.) */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 180px;\n}\n\n/* -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- */\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n/* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n illustration column too wide, which pinches the heading down to\n 4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n matching the live affinda.com reference. */\n:host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n /* Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. */\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. */\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n display: none;\n}\n\n.hero__badge:has(*) {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- */\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. */\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- */\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n/* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n tower past the text column. 540 px matches the live treatment for\n the /industries + /integrations heroes. */\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: 540px;\n}\n\n/* -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- */\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n /* Centered variant still needs a touch more clearance under the\n navbar pill on tablet. */\n :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 144px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid,\n :host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. */\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
package/dist/affinda/affinda.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,g as a,b as t}from"./p-C4WBekD2.js";export{s as setNonce}from"./p-C4WBekD2.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await a();return t([["p-7d08db58",[[262,"af-hero",{variant:[513],heading:[1],description:[1],floatNavbar:[516,"float-navbar"],topPad:[1,"top-pad"],maxWidth:[2,"max-width"],maskImage:[4,"mask-image"]}]]],["p-432ee0e3",[[262,"af-icon-text",{icon:[1],headingSize:[2,"heading-size"],orientation:[1],iconSize:[1,"icon-size"]}]]],["p-19dc4331",[[262,"af-testimonial",{backgroundImage:[1,"background-image"],logoImage:[1,"logo-image"],quote:[1],attribution:[1],readMoreLink:[1,"read-more-link"],showNavigation:[1028,"show-navigation"],hasPrev:[1028,"has-prev"],hasNext:[1028,"has-next"]}]]],["p-d34da6c0",[[262,"af-feature-card",{theme:[1],layout:[1],cardSize:[513,"card-size"],headingSize:[2,"heading-size"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"]}]]],["p-2586fbb8",[[262,"af-illustrated-card",{theme:[1],breakpoint:[1],cardSize:[1,"card-size"]}]]],["p-d6b8c3b4",[[262,"af-numbered-stepper-item",{index:[514]}]]],["p-750063ab",[[257,"af-stat",{value:[1],label:[1]}]]],["p-9ca72e02",[[258,"af-testimonial-stat",{value:[1],description:[1],accentBorder:[4,"accent-border"]}]]],["p-587fd0fa",[[262,"af-video-container",{videoThumbnailUrl:[1,"video-thumbnail-url"],videoAlt:[1,"video-alt"],videoUrl:[1,"video-url"]}]]],["p-9b115359",[[262,"af-feature-grid",{columns:[2],mobileLayout:[1,"mobile-layout"],scrollProgress:[32]},null,{mobileLayout:["onMobileLayoutChange"]}]]],["p-43a0286a",[[262,"af-grid-callout",{imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],imagePosition:[1,"image-position"],columns:[2],headingSize:[2,"heading-size"]}]]],["p-c4fd7d48",[[262,"af-in-page-banner",{theme:[1],heading:[1],description:[1],primaryButtonText:[1,"primary-button-text"],primaryButtonUrl:[1,"primary-button-url"],secondaryButtonText:[1,"secondary-button-text"],secondaryButtonUrl:[1,"secondary-button-url"],illustrationUrl:[1,"illustration-url"],showWaveDecoration:[4,"show-wave-decoration"]}]]],["p-dd4c8640",[[262,"af-split-section",{topTheme:[1,"top-theme"],bottomTheme:[1,"bottom-theme"],padding:[1],container:[4]}]]],["p-d9913985",[[262,"af-testimonial-carousel",{currentIndex:[32],isAnimating:[32],testimonialCount:[32]},[[0,"afNavPrev","handleNavPrev"],[0,"afNavNext","handleNavNext"]]]]],["p-42c4d7b1",[[262,"af-text-image",{imagePosition:[1,"image-position"],imageProportion:[1,"image-proportion"],src:[1],alt:[1],showSecondLockup:[4,"show-second-lockup"]}]]],["p-adabec15",[[262,"af-accordion",{mode:[1],value:[1025],defaultValue:[1,"default-value"],internalValue:[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{value:["handleValueChange"]}]]],["p-e0619222",[[257,"af-accordion-item",{itemId:[513,"item-id"],open:[1540],disabled:[516],contentHeight:[32],toggle:[64]},null,{open:["handleOpenChange"]}]]],["p-1902ed20",[[257,"af-button-group",{direction:[1],gap:[1]}]]],["p-05072f90",[[257,"af-center",{axis:[1],inline:[4],minHeight:[1,"min-height"]}]]],["p-9e19a477",[[257,"af-checkbox",{checked:[1540],indeterminate:[516],disabled:[516],name:[1],value:[1]}]]],["p-7ce2b434",[[262,"af-client-carousel",{theme:[1],rows:[2],mode:[1]}]]],["p-b82fc7f1",[[257,"af-color-swatch",{color:[1],name:[1],size:[1]}]]],["p-14bd7903",[[262,"af-contact-item",{label:[1],value:[1]}]]],["p-6986f604",[[257,"af-divider",{orientation:[1],spacing:[1]}]]],["p-d923549d",[[262,"af-feature-accordion",{heading:[1],items:[1],cycleInterval:[2,"cycle-interval"],autoCycle:[4,"auto-cycle"],expandedIndex:[32],timerProgress:[32]},null,{autoCycle:["handleAutoCycleChange"]}]]],["p-67a27eaf",[[257,"af-fieldset",{legend:[1],orientation:[1],disabled:[516]}]]],["p-b8ea57a9",[[262,"af-footer",{copyrightText:[1,"copyright-text"],statusText:[1,"status-text"],statusUrl:[1,"status-url"],systemsOperational:[4,"systems-operational"],showStatus:[4,"show-status"]}]]],["p-9963bec0",[[262,"af-footer-column",{heading:[1]}]]],["p-7eca844d",[[262,"af-footer-link",{href:[1],external:[4]}]]],["p-ce77f08f",[[257,"af-grid",{columns:[2],columnsLg:[2,"columns-lg"],columnsMd:[2,"columns-md"],columnsSm:[2,"columns-sm"],gap:[1],align:[1]}]]],["p-95b49b45",[[257,"af-inline",{gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-7013570d",[[257,"af-input",{label:[1],description:[1],placeholder:[1],value:[1025],type:[1],name:[1],disabled:[516],required:[4],readonly:[4],error:[1],showInfoIcon:[4,"show-info-icon"],showSearchIcon:[4,"show-search-icon"],clearable:[4],autocomplete:[1],maxlength:[2],minlength:[2],pattern:[1],isFocused:[32],isHovered:[32]}]]],["p-dd0cd57e",[[257,"af-logo-well"]]],["p-ec042bc4",[[262,"af-nav-accordion",{mode:[1],breakpoint:[513],value:[1025],internalValue:[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["p-ea150b3d",[[262,"af-nav-accordion-item",{itemId:[513,"item-id"],label:[1],open:[1540],disabled:[516],href:[1],breakpoint:[513],contentHeight:[32],hasTriggerSlot:[32],hasContent:[32],toggle:[64]},null,{open:["handleOpenChange"]}]]],["p-df6c7170",[[258,"af-nav-card",{heading:[1],href:[1],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],isHovered:[32]}]]],["p-2a8441cb",[[262,"af-nav-menu",{heading:[1],breakpoint:[1],showBorder:[4,"show-border"],cardStyle:[516,"card-style"]}]]],["p-77ec01ee",[[262,"af-nav-menu-nest",{type:[1],breakpoint:[1],showSidebarBorder:[516,"show-sidebar-border"]}]]],["p-3238f8e8",[[262,"af-numbered-stepper",{orientation:[1]}]]],["p-26a6d9a7",[[257,"af-paperclip-decoration",{width:[1],height:[1],opacity:[2],fill:[1]}]]],["p-bc77706d",[[257,"af-radio",{checked:[1540],disabled:[516],name:[513],value:[1]}]]],["p-479a300e",[[257,"af-show",{above:[1],below:[1]}]]],["p-a7b51bb6",[[262,"af-social-link",{href:[1],label:[1],icon:[1]}]]],["p-fff252df",[[257,"af-spacer",{size:[1],flex:[4],axis:[1]}]]],["p-b65cf4c3",[[257,"af-stack",{direction:[1],gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-6b7fcb18",[[262,"af-stats-row"]]],["p-7c9683d8",[[262,"af-stepper",{orientation:[1]}]]],["p-e90a3892",[[262,"af-stepper-step",{index:[514]}]]],["p-27469df6",[[257,"af-switch",{active:[1540],disabled:[516],name:[1],value:[1]}]]],["p-ac45df4b",[[257,"af-tab",{label:[1],active:[516],disabled:[516],shape:[513],displayIcon:[4,"display-icon"],displayNumber:[4,"display-number"],value:[1]}]]],["p-d06ae9cd",[[257,"af-tab-bar",{shape:[513],breakpoint:[513]},[[0,"keydown","handleKeyDown"]]]]],["p-75443f08",[[257,"af-tag",{size:[1],variant:[1],href:[1]}]]],["p-255a8254",[[262,"af-text-image-nest",{layout:[1]}]]],["p-d647ae06",[[257,"af-textarea",{label:[1],description:[1],placeholder:[1],value:[1025],name:[1],disabled:[516],required:[4],readonly:[4],error:[1],showInfoIcon:[4,"show-info-icon"],rows:[2],maxlength:[2],minlength:[2],resize:[1],isFocused:[32],isHovered:[32]}]]],["p-44e976ee",[[262,"af-theme-override",{theme:[1]}]]],["p-3dd90f46",[[257,"af-visually-hidden",{focusable:[4]}]]],["p-9610cd3c",[[258,"af-icon-box",{icon:[1],size:[1]}]]],["p-bac968a1",[[262,"af-section",{padding:[1],theme:[1],container:[4]}]]],["p-4f15b8f0",[[257,"af-aspect-ratio",{ratio:[1]}]]],["p-08a42935",[[257,"af-icon-button",{variant:[513],size:[1],disabled:[4],href:[1],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-f9ecbde8",[[258,"af-image",{src:[1],alt:[1],shape:[1]}]]],["p-f7fc76d2",[[257,"af-number-badge",{number:[2],variant:[1],size:[2]}]]],["p-5885ebd3",[[257,"af-button",{variant:[513],size:[1],disabled:[4],type:[1],href:[1],hasIconLeft:[32],hasIconRight:[32]}]]],["p-5f3419c3",[[262,"af-card",{theme:[1],stretch:[516],interactive:[516]}]]],["p-57fcfd78",[[258,"af-progress-line",{progress:[2],orientation:[1]}]]],["p-4ccc3147",[[257,"af-container",{maxWidth:[1,"max-width"]}]]],["p-7640c285",[[257,"af-icon",{name:[1],size:[2],label:[1]}]]],["p-3c6790f8",[[262,"af-navbar",{showDefaultLogo:[4,"show-default-logo"],theme:[1],forceMobile:[516,"force-mobile"],mobileMenuOpen:[32],activeDropdown:[32]},[[0,"click","handleTriggerClick"],[1,"mouseover","handleHover"],[1,"mouseleave","handleHostLeave"],[1,"mouseenter","handleHostEnter"],[4,"click","handleDocumentClick"],[4,"keydown","handleKeyDown"]]],[262,"af-nav-item",{hierarchy:[1],variant:[1],breakpoint:[513],href:[1],active:[4]}],[257,"af-logo"],[257,"af-heading",{level:[1],align:[1]}],[257,"af-text",{variant:[1],align:[1],as:[1]}]]],["p-67e8c6f6",[[257,"af-typography-lockup",{headingSize:[8,"heading-size"],breakpoint:[1],textAlignment:[1,"text-alignment"],headingAlignment:[1,"heading-alignment"],descriptionAlignment:[1,"description-alignment"],buttonLayout:[1,"button-layout"],buttonsAlignment:[1,"buttons-alignment"],maxWidth:[2,"max-width"],headingColor:[1,"heading-color"],descriptionColor:[1,"description-color"],hasDescription:[32],hasButtons:[32]}]]]],e)}));
1
+ import{p as e,g as a,b as t}from"./p-C4WBekD2.js";export{s as setNonce}from"./p-C4WBekD2.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await a();return t([["p-9b9e81cf",[[262,"af-hero",{variant:[513],heading:[1],description:[1],floatNavbar:[516,"float-navbar"],topPad:[1,"top-pad"],maxWidth:[2,"max-width"],maskImage:[4,"mask-image"]}]]],["p-432ee0e3",[[262,"af-icon-text",{icon:[1],headingSize:[2,"heading-size"],orientation:[1],iconSize:[1,"icon-size"]}]]],["p-19dc4331",[[262,"af-testimonial",{backgroundImage:[1,"background-image"],logoImage:[1,"logo-image"],quote:[1],attribution:[1],readMoreLink:[1,"read-more-link"],showNavigation:[1028,"show-navigation"],hasPrev:[1028,"has-prev"],hasNext:[1028,"has-next"]}]]],["p-d34da6c0",[[262,"af-feature-card",{theme:[1],layout:[1],cardSize:[513,"card-size"],headingSize:[2,"heading-size"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"]}]]],["p-2586fbb8",[[262,"af-illustrated-card",{theme:[1],breakpoint:[1],cardSize:[1,"card-size"]}]]],["p-d6b8c3b4",[[262,"af-numbered-stepper-item",{index:[514]}]]],["p-750063ab",[[257,"af-stat",{value:[1],label:[1]}]]],["p-9ca72e02",[[258,"af-testimonial-stat",{value:[1],description:[1],accentBorder:[4,"accent-border"]}]]],["p-587fd0fa",[[262,"af-video-container",{videoThumbnailUrl:[1,"video-thumbnail-url"],videoAlt:[1,"video-alt"],videoUrl:[1,"video-url"]}]]],["p-9b115359",[[262,"af-feature-grid",{columns:[2],mobileLayout:[1,"mobile-layout"],scrollProgress:[32]},null,{mobileLayout:["onMobileLayoutChange"]}]]],["p-43a0286a",[[262,"af-grid-callout",{imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],imagePosition:[1,"image-position"],columns:[2],headingSize:[2,"heading-size"]}]]],["p-c4fd7d48",[[262,"af-in-page-banner",{theme:[1],heading:[1],description:[1],primaryButtonText:[1,"primary-button-text"],primaryButtonUrl:[1,"primary-button-url"],secondaryButtonText:[1,"secondary-button-text"],secondaryButtonUrl:[1,"secondary-button-url"],illustrationUrl:[1,"illustration-url"],showWaveDecoration:[4,"show-wave-decoration"]}]]],["p-dd4c8640",[[262,"af-split-section",{topTheme:[1,"top-theme"],bottomTheme:[1,"bottom-theme"],padding:[1],container:[4]}]]],["p-d9913985",[[262,"af-testimonial-carousel",{currentIndex:[32],isAnimating:[32],testimonialCount:[32]},[[0,"afNavPrev","handleNavPrev"],[0,"afNavNext","handleNavNext"]]]]],["p-42c4d7b1",[[262,"af-text-image",{imagePosition:[1,"image-position"],imageProportion:[1,"image-proportion"],src:[1],alt:[1],showSecondLockup:[4,"show-second-lockup"]}]]],["p-adabec15",[[262,"af-accordion",{mode:[1],value:[1025],defaultValue:[1,"default-value"],internalValue:[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{value:["handleValueChange"]}]]],["p-e0619222",[[257,"af-accordion-item",{itemId:[513,"item-id"],open:[1540],disabled:[516],contentHeight:[32],toggle:[64]},null,{open:["handleOpenChange"]}]]],["p-1902ed20",[[257,"af-button-group",{direction:[1],gap:[1]}]]],["p-05072f90",[[257,"af-center",{axis:[1],inline:[4],minHeight:[1,"min-height"]}]]],["p-9e19a477",[[257,"af-checkbox",{checked:[1540],indeterminate:[516],disabled:[516],name:[1],value:[1]}]]],["p-7ce2b434",[[262,"af-client-carousel",{theme:[1],rows:[2],mode:[1]}]]],["p-b82fc7f1",[[257,"af-color-swatch",{color:[1],name:[1],size:[1]}]]],["p-14bd7903",[[262,"af-contact-item",{label:[1],value:[1]}]]],["p-6986f604",[[257,"af-divider",{orientation:[1],spacing:[1]}]]],["p-d923549d",[[262,"af-feature-accordion",{heading:[1],items:[1],cycleInterval:[2,"cycle-interval"],autoCycle:[4,"auto-cycle"],expandedIndex:[32],timerProgress:[32]},null,{autoCycle:["handleAutoCycleChange"]}]]],["p-67a27eaf",[[257,"af-fieldset",{legend:[1],orientation:[1],disabled:[516]}]]],["p-b8ea57a9",[[262,"af-footer",{copyrightText:[1,"copyright-text"],statusText:[1,"status-text"],statusUrl:[1,"status-url"],systemsOperational:[4,"systems-operational"],showStatus:[4,"show-status"]}]]],["p-9963bec0",[[262,"af-footer-column",{heading:[1]}]]],["p-7eca844d",[[262,"af-footer-link",{href:[1],external:[4]}]]],["p-ce77f08f",[[257,"af-grid",{columns:[2],columnsLg:[2,"columns-lg"],columnsMd:[2,"columns-md"],columnsSm:[2,"columns-sm"],gap:[1],align:[1]}]]],["p-95b49b45",[[257,"af-inline",{gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-7013570d",[[257,"af-input",{label:[1],description:[1],placeholder:[1],value:[1025],type:[1],name:[1],disabled:[516],required:[4],readonly:[4],error:[1],showInfoIcon:[4,"show-info-icon"],showSearchIcon:[4,"show-search-icon"],clearable:[4],autocomplete:[1],maxlength:[2],minlength:[2],pattern:[1],isFocused:[32],isHovered:[32]}]]],["p-dd0cd57e",[[257,"af-logo-well"]]],["p-ec042bc4",[[262,"af-nav-accordion",{mode:[1],breakpoint:[513],value:[1025],internalValue:[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["p-ea150b3d",[[262,"af-nav-accordion-item",{itemId:[513,"item-id"],label:[1],open:[1540],disabled:[516],href:[1],breakpoint:[513],contentHeight:[32],hasTriggerSlot:[32],hasContent:[32],toggle:[64]},null,{open:["handleOpenChange"]}]]],["p-df6c7170",[[258,"af-nav-card",{heading:[1],href:[1],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],isHovered:[32]}]]],["p-2a8441cb",[[262,"af-nav-menu",{heading:[1],breakpoint:[1],showBorder:[4,"show-border"],cardStyle:[516,"card-style"]}]]],["p-77ec01ee",[[262,"af-nav-menu-nest",{type:[1],breakpoint:[1],showSidebarBorder:[516,"show-sidebar-border"]}]]],["p-3238f8e8",[[262,"af-numbered-stepper",{orientation:[1]}]]],["p-26a6d9a7",[[257,"af-paperclip-decoration",{width:[1],height:[1],opacity:[2],fill:[1]}]]],["p-bc77706d",[[257,"af-radio",{checked:[1540],disabled:[516],name:[513],value:[1]}]]],["p-479a300e",[[257,"af-show",{above:[1],below:[1]}]]],["p-a7b51bb6",[[262,"af-social-link",{href:[1],label:[1],icon:[1]}]]],["p-fff252df",[[257,"af-spacer",{size:[1],flex:[4],axis:[1]}]]],["p-b65cf4c3",[[257,"af-stack",{direction:[1],gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-6b7fcb18",[[262,"af-stats-row"]]],["p-7c9683d8",[[262,"af-stepper",{orientation:[1]}]]],["p-e90a3892",[[262,"af-stepper-step",{index:[514]}]]],["p-27469df6",[[257,"af-switch",{active:[1540],disabled:[516],name:[1],value:[1]}]]],["p-ac45df4b",[[257,"af-tab",{label:[1],active:[516],disabled:[516],shape:[513],displayIcon:[4,"display-icon"],displayNumber:[4,"display-number"],value:[1]}]]],["p-d06ae9cd",[[257,"af-tab-bar",{shape:[513],breakpoint:[513]},[[0,"keydown","handleKeyDown"]]]]],["p-75443f08",[[257,"af-tag",{size:[1],variant:[1],href:[1]}]]],["p-255a8254",[[262,"af-text-image-nest",{layout:[1]}]]],["p-d647ae06",[[257,"af-textarea",{label:[1],description:[1],placeholder:[1],value:[1025],name:[1],disabled:[516],required:[4],readonly:[4],error:[1],showInfoIcon:[4,"show-info-icon"],rows:[2],maxlength:[2],minlength:[2],resize:[1],isFocused:[32],isHovered:[32]}]]],["p-44e976ee",[[262,"af-theme-override",{theme:[1]}]]],["p-3dd90f46",[[257,"af-visually-hidden",{focusable:[4]}]]],["p-9610cd3c",[[258,"af-icon-box",{icon:[1],size:[1]}]]],["p-bac968a1",[[262,"af-section",{padding:[1],theme:[1],container:[4]}]]],["p-4f15b8f0",[[257,"af-aspect-ratio",{ratio:[1]}]]],["p-08a42935",[[257,"af-icon-button",{variant:[513],size:[1],disabled:[4],href:[1],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-f9ecbde8",[[258,"af-image",{src:[1],alt:[1],shape:[1]}]]],["p-f7fc76d2",[[257,"af-number-badge",{number:[2],variant:[1],size:[2]}]]],["p-5885ebd3",[[257,"af-button",{variant:[513],size:[1],disabled:[4],type:[1],href:[1],hasIconLeft:[32],hasIconRight:[32]}]]],["p-5f3419c3",[[262,"af-card",{theme:[1],stretch:[516],interactive:[516]}]]],["p-57fcfd78",[[258,"af-progress-line",{progress:[2],orientation:[1]}]]],["p-4ccc3147",[[257,"af-container",{maxWidth:[1,"max-width"]}]]],["p-7640c285",[[257,"af-icon",{name:[1],size:[2],label:[1]}]]],["p-3c6790f8",[[262,"af-navbar",{showDefaultLogo:[4,"show-default-logo"],theme:[1],forceMobile:[516,"force-mobile"],mobileMenuOpen:[32],activeDropdown:[32]},[[0,"click","handleTriggerClick"],[1,"mouseover","handleHover"],[1,"mouseleave","handleHostLeave"],[1,"mouseenter","handleHostEnter"],[4,"click","handleDocumentClick"],[4,"keydown","handleKeyDown"]]],[262,"af-nav-item",{hierarchy:[1],variant:[1],breakpoint:[513],href:[1],active:[4]}],[257,"af-logo"],[257,"af-heading",{level:[1],align:[1]}],[257,"af-text",{variant:[1],align:[1],as:[1]}]]],["p-67e8c6f6",[[257,"af-typography-lockup",{headingSize:[8,"heading-size"],breakpoint:[1],textAlignment:[1,"text-alignment"],headingAlignment:[1,"heading-alignment"],descriptionAlignment:[1,"description-alignment"],buttonLayout:[1,"button-layout"],buttonsAlignment:[1,"buttons-alignment"],maxWidth:[2,"max-width"],headingColor:[1,"heading-color"],descriptionColor:[1,"description-color"],hasDescription:[32],hasButtons:[32]}]]]],e)}));
2
2
  //# sourceMappingURL=affinda.esm.js.map
package/dist/affinda/index.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- export{af_heading as AfHeading,af_logo as AfLogo,af_nav_item as AfNavItem,af_navbar as AfNavbar,af_text as AfText}from"./p-3c6790f8.entry.js";export{af_color_swatch as AfColorSwatch}from"./p-b82fc7f1.entry.js";export{af_container as AfContainer}from"./p-4ccc3147.entry.js";export{af_aspect_ratio as AfAspectRatio}from"./p-4f15b8f0.entry.js";export{af_button as AfButton}from"./p-5885ebd3.entry.js";export{af_icon_button as AfIconButton}from"./p-08a42935.entry.js";export{af_button_group as AfButtonGroup}from"./p-1902ed20.entry.js";export{af_typography_lockup as AfTypographyLockup}from"./p-67e8c6f6.entry.js";export{af_checkbox as AfCheckbox}from"./p-9e19a477.entry.js";export{af_radio as AfRadio}from"./p-bc77706d.entry.js";export{af_switch as AfSwitch}from"./p-27469df6.entry.js";export{af_fieldset as AfFieldset}from"./p-67a27eaf.entry.js";export{af_input as AfInput}from"./p-7013570d.entry.js";export{af_textarea as AfTextarea}from"./p-d647ae06.entry.js";export{af_tag as AfTag}from"./p-75443f08.entry.js";export{af_tab as AfTab}from"./p-ac45df4b.entry.js";export{af_tab_bar as AfTabBar}from"./p-d06ae9cd.entry.js";export{af_feature_card as AfFeatureCard}from"./p-d34da6c0.entry.js";export{af_illustrated_card as AfIllustratedCard}from"./p-2586fbb8.entry.js";export{af_hero as AfHero}from"./p-7d08db58.entry.js";import"./p-C4WBekD2.js";
1
+ export{af_heading as AfHeading,af_logo as AfLogo,af_nav_item as AfNavItem,af_navbar as AfNavbar,af_text as AfText}from"./p-3c6790f8.entry.js";export{af_color_swatch as AfColorSwatch}from"./p-b82fc7f1.entry.js";export{af_container as AfContainer}from"./p-4ccc3147.entry.js";export{af_aspect_ratio as AfAspectRatio}from"./p-4f15b8f0.entry.js";export{af_button as AfButton}from"./p-5885ebd3.entry.js";export{af_icon_button as AfIconButton}from"./p-08a42935.entry.js";export{af_button_group as AfButtonGroup}from"./p-1902ed20.entry.js";export{af_typography_lockup as AfTypographyLockup}from"./p-67e8c6f6.entry.js";export{af_checkbox as AfCheckbox}from"./p-9e19a477.entry.js";export{af_radio as AfRadio}from"./p-bc77706d.entry.js";export{af_switch as AfSwitch}from"./p-27469df6.entry.js";export{af_fieldset as AfFieldset}from"./p-67a27eaf.entry.js";export{af_input as AfInput}from"./p-7013570d.entry.js";export{af_textarea as AfTextarea}from"./p-d647ae06.entry.js";export{af_tag as AfTag}from"./p-75443f08.entry.js";export{af_tab as AfTab}from"./p-ac45df4b.entry.js";export{af_tab_bar as AfTabBar}from"./p-d06ae9cd.entry.js";export{af_feature_card as AfFeatureCard}from"./p-d34da6c0.entry.js";export{af_illustrated_card as AfIllustratedCard}from"./p-2586fbb8.entry.js";export{af_hero as AfHero}from"./p-9b9e81cf.entry.js";import"./p-C4WBekD2.js";
2
2
  //# sourceMappingURL=index.esm.js.map
package/dist/affinda/p-9b9e81cf.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as e,h as o,H as a,a as r}from"./p-C4WBekD2.js";const i=".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:180px}.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--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr 1fr}.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:540px}.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--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:144px}.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,.hero--inkwell-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}}";const t={"inkwell-photo":"inkwell","inkwell-illustration":"inkwell","inkwell-centered":"inkwell","soft-clay-illustration":"soft-clay","mist-green-illustration":"mist-green"};const s=class{constructor(o){e(this,o);this.variant="inkwell-photo";this.heading="";this.description="";this.topPad="default";this.maxWidth=620;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 t[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 e=this.variant==="inkwell-centered"?"center":"left";return o("div",{class:"hero__copy"},o("div",{class:"hero__badge"},o("slot",{name:"badge"})),o("af-typography-lockup",{"heading-size":"1","text-alignment":e,"max-width":String(this.maxWidth)},this.heading?o("h1",null,this.heading):o("slot",null),this.description?o("span",{slot:"description"},this.description):o("slot",{name:"description",slot:"description"})),o("div",{class:"hero__buttons"},o("slot",{name:"buttons"})))}renderPhoto(){return o("div",{class:{hero__image:true,"hero__image--masked":this.maskImage}},o("slot",{name:"image"}))}renderIllustration(){return o("div",{class:"hero__illustration"},o("slot",{name:"illustration"}))}render(){const e=this.variant;const r=e==="inkwell-centered";const i=e==="inkwell-photo";const t=e==="inkwell-illustration"||e==="soft-clay-illustration"||e==="mist-green-illustration";return o(a,{key:"6e8e522c6593a79fbb93eaf421c6b3f41a2072f5",class:{[`hero--${e}`]:true,[`hero--pad-${this.topPad}`]:true,[`hero--theme-${this.theme}`]:true,"hero--float-navbar":this.resolvedFloatNavbar}},o("af-section",{key:"dc6181658d53a8c7166d3f090df9666d35310338",theme:this.theme,padding:"none",container:false,class:"hero__section"},r&&o("div",{key:"b8357ea1cc08dafa3a3f5e4cd8c545bef1e3df1c",class:"hero__paperclip","aria-hidden":"true"},o("slot",{key:"da4b0dcb83e6e8c09b9962ba7d0c09e02f6721c5",name:"paperclip"})),o("af-container",{key:"0dbffc963a56e53ed7206b59cccfd74f5bd792ee",class:"hero__inner"},r?this.renderCopy():o("div",{class:"hero__grid"},this.renderCopy(),i&&this.renderPhoto(),t&&this.renderIllustration())),o("div",{key:"d4316dbc5ba954ce2a52d73dfb73575b77f394db",class:"hero__logos"},o("slot",{key:"d9ff55a2c238d5db322aef90cb28006d91f7dffc",name:"logos-below"}))))}get el(){return r(this)}};s.style=i;export{s as af_hero};
2
+ //# sourceMappingURL=p-9b9e81cf.entry.js.map
package/dist/affinda/{p-7d08db58.entry.js.map → p-9b9e81cf.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["registerInstance","h","Host","getElement","afHeroCss","VARIANT_THEMES","AfHero","constructor","hostRef","this","variant","heading","description","topPad","maxWidth","maskImage","resolvedFloatNavbar","floatNavbar","theme","connectedCallback","document","body","setAttribute","disconnectedCallback","querySelector","removeAttribute","renderCopy","alignment","class","name","String","slot","renderPhoto","hero__image","renderIllustration","render","v","centered","hasImage","hasIllustration","key","padding","container","el","style"],"sources":["0"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["registerInstance","h","Host","getElement","afHeroCss","VARIANT_THEMES","AfHero","constructor","hostRef","this","variant","heading","description","topPad","maxWidth","maskImage","resolvedFloatNavbar","floatNavbar","theme","connectedCallback","document","body","setAttribute","disconnectedCallback","querySelector","removeAttribute","renderCopy","alignment","class","name","String","slot","renderPhoto","hero__image","renderIllustration","render","v","centered","hasImage","hasIllustration","key","padding","container","el","style"],"sources":["0"],"mappings":"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","ignoreList":[]}
package/dist/cjs/af-hero.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var index = require('./index-3161MbMQ.js');
4
4
 
5
- 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}}";
5
+ 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:180px}.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--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr 1fr}.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:540px}.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--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:144px}.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,.hero--inkwell-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}}";
6
6
 
7
7
  /**
8
8
  * Map each variant to its underlying section theme token. Keeps one source
package/dist/cjs/af-hero.entry.cjs.js.map CHANGED
@@ -1 +1 @@
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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"}
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: leave clear breathing room under the floating navbar\n pill so the heading isn't clipped at the top. The live affinda.com\n reference at 1280 vw renders the heading roughly 180 px below the\n viewport top — pad accordingly. (Earlier value of 80 px clipped the\n heading behind the navbar; caught by qa/regression-compare in the\n site repo.) */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 180px;\n}\n\n/* -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- */\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n/* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n illustration column too wide, which pinches the heading down to\n 4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n matching the live affinda.com reference. */\n:host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n /* Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. */\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. */\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n display: none;\n}\n\n.hero__badge:has(*) {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- */\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. */\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- */\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n/* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n tower past the text column. 540 px matches the live treatment for\n the /industries + /integrations heroes. */\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: 540px;\n}\n\n/* -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- */\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n /* Centered variant still needs a touch more clearance under the\n navbar pill on tablet. */\n :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 144px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid,\n :host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. */\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}
package/dist/collection/components/af-hero/af-hero.css CHANGED
@@ -63,10 +63,14 @@
63
63
  padding-top: 164px;
64
64
  }
65
65
 
66
- /* Centered variant uses slightly tighter top padding to match the live
67
- /platform hero (80px), since the lockup is typically tall. */
66
+ /* Centered variant: leave clear breathing room under the floating navbar
67
+ pill so the heading isn't clipped at the top. The live affinda.com
68
+ reference at 1280 vw renders the heading roughly 180 px below the
69
+ viewport top — pad accordingly. (Earlier value of 80 px clipped the
70
+ heading behind the navbar; caught by qa/regression-compare in the
71
+ site repo.) */
68
72
  :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {
69
- padding-top: 80px;
73
+ padding-top: 180px;
70
74
  }
71
75
 
72
76
  /* -----------------------------------------------------------------
@@ -87,6 +91,14 @@
87
91
  gap: 48px;
88
92
  }
89
93
 
94
+ /* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the
95
+ illustration column too wide, which pinches the heading down to
96
+ 4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines
97
+ matching the live affinda.com reference. */
98
+ :host(.hero--inkwell-illustration) .hero__grid {
99
+ grid-template-columns: 1fr 1fr;
100
+ }
101
+
90
102
  .hero__copy {
91
103
  /* Small inset pushes heading inward from the hard container edge —
92
104
  matches the live .page-banner-text treatment. Only applied to
@@ -199,8 +211,11 @@
199
211
  border-radius: 16px;
200
212
  }
201
213
 
214
+ /* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't
215
+ tower past the text column. 540 px matches the live treatment for
216
+ the /industries + /integrations heroes. */
202
217
  :host(.hero--inkwell-illustration) .hero__illustration {
203
- max-width: none;
218
+ max-width: 540px;
204
219
  }
205
220
 
206
221
  /* -----------------------------------------------------------------
@@ -237,13 +252,20 @@
237
252
  padding-top: 112px;
238
253
  }
239
254
 
255
+ /* Centered variant still needs a touch more clearance under the
256
+ navbar pill on tablet. */
257
+ :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {
258
+ padding-top: 144px;
259
+ }
260
+
240
261
  .hero__grid {
241
262
  grid-template-columns: 1fr;
242
263
  gap: 32px;
243
264
  }
244
265
 
245
266
  :host(.hero--soft-clay-illustration) .hero__grid,
246
- :host(.hero--mist-green-illustration) .hero__grid {
267
+ :host(.hero--mist-green-illustration) .hero__grid,
268
+ :host(.hero--inkwell-illustration) .hero__grid {
247
269
  grid-template-columns: 1fr;
248
270
  }
249
271
 
package/dist/components/af-hero.js CHANGED
@@ -1,4 +1,4 @@
1
- import { A as AfHero$1, d as defineCustomElement$1 } from './p-CVZQcdGR.js';
1
+ import { A as AfHero$1, d as defineCustomElement$1 } from './p-D7xVlaes.js';
2
2
 
3
3
  const AfHero = AfHero$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/index.js CHANGED
@@ -22,7 +22,7 @@ export { A as AfTab } from './p-Xy0_sffa.js';
22
22
  export { A as AfTabBar } from './p-C0enaaNi.js';
23
23
  export { A as AfFeatureCard } from './p-CDPPh9ES.js';
24
24
  export { A as AfIllustratedCard } from './p-CdR70Kv1.js';
25
- export { A as AfHero } from './p-CVZQcdGR.js';
25
+ export { A as AfHero } from './p-D7xVlaes.js';
26
26
  //# sourceMappingURL=index.js.map
27
27
 
28
28
  //# sourceMappingURL=index.js.map
package/dist/components/{p-CVZQcdGR.js → p-D7xVlaes.js} RENAMED
@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './p-Bx-hxLP0.js';
3
3
  import { d as defineCustomElement$2 } from './p-DjjPGV3a.js';
4
4
  import { d as defineCustomElement$1 } from './p-CTDelwMf.js';
5
5
 
6
- 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}}";
6
+ 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:180px}.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--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr 1fr}.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:540px}.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--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:144px}.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,.hero--inkwell-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}}";
7
7
 
8
8
  /**
9
9
  * Map each variant to its underlying section theme token. Keeps one source
@@ -131,6 +131,6 @@ function defineCustomElement() {
131
131
  }
132
132
 
133
133
  export { AfHero as A, defineCustomElement as d };
134
- //# sourceMappingURL=p-CVZQcdGR.js.map
134
+ //# sourceMappingURL=p-D7xVlaes.js.map
135
135
 
136
- //# sourceMappingURL=p-CVZQcdGR.js.map
136
+ //# sourceMappingURL=p-D7xVlaes.js.map
package/dist/components/{p-CVZQcdGR.js.map → p-D7xVlaes.js.map} RENAMED
@@ -1 +1 @@
1
- {"file":"p-CVZQcdGR.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
1
+ {"file":"p-D7xVlaes.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). */\n --af-hero-image-lift: -260px;\n /* Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. */\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- */\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n /* Default size — consumers can resize the slotted decoration via its\n own width/height props. */\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/* -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- */\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/* Centered variant: leave clear breathing room under the floating navbar\n pill so the heading isn't clipped at the top. The live affinda.com\n reference at 1280 vw renders the heading roughly 180 px below the\n viewport top — pad accordingly. (Earlier value of 80 px clipped the\n heading behind the navbar; caught by qa/regression-compare in the\n site repo.) */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 180px;\n}\n\n/* -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- */\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n/* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n illustration column too wide, which pinches the heading down to\n 4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n matching the live affinda.com reference. */\n:host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n /* Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. */\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. */\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n display: none;\n}\n\n.hero__badge:has(*) {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- */\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. */\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- */\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n/* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n tower past the text column. 540 px matches the live treatment for\n the /industries + /integrations heroes. */\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: 540px;\n}\n\n/* -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- */\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n /* Centered variant still needs a touch more clearance under the\n navbar pill on tablet. */\n :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 144px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid,\n :host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. */\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/af-hero.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host, a as getElement } from './index-C4WBekD2.js';
2
2
 
3
- 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}}";
3
+ 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:180px}.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--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr 1fr}.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:540px}.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--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:144px}.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,.hero--inkwell-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}}";
4
4
 
5
5
  /**
6
6
  * Map each variant to its underlying section theme token. Keeps one source
package/dist/esm/af-hero.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"af-hero.entry.js","sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). */\n --af-hero-image-lift: -260px;\n /* Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. */\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- */\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n /* Default size — consumers can resize the slotted decoration via its\n own width/height props. */\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/* -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- */\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/* Centered variant uses slightly tighter top padding to match the live\n /platform hero (80px), since the lockup is typically tall. */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 80px;\n}\n\n/* -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- */\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n.hero__copy {\n /* Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. */\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. */\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n display: none;\n}\n\n.hero__badge:has(*) {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- */\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. */\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- */\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: none;\n}\n\n/* -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- */\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. */\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"af-hero.entry.js","sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n /* Image-lift custom property — consumers override per-page via inline\n style or a page-level rule. The negative value pulls the photo's\n crown above the hero top so it reads behind the floating navbar\n pill. Matches the live Webflow stack (~-260px on .page-banner). */\n --af-hero-image-lift: -260px;\n /* Blob mask container size override — rarely needed; defaults to the\n photo column's natural dimensions. */\n --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n position: relative;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n Paperclip watermark slot (inkwell-centered only)\n ----------------------------------------------------------------- */\n.hero__paperclip {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n /* Default size — consumers can resize the slotted decoration via its\n own width/height props. */\n width: 655px;\n height: 754px;\n}\n\n@media (max-width: 991px) {\n .hero__paperclip {\n width: 480px;\n height: 552px;\n }\n}\n\n@media (max-width: 767px) {\n .hero__paperclip {\n display: none;\n }\n}\n\n/* -----------------------------------------------------------------\n Inner wrapper — top/bottom padding\n ----------------------------------------------------------------- */\n.hero__inner {\n position: relative;\n z-index: 1;\n padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n padding-top: 164px;\n}\n\n/* Centered variant: leave clear breathing room under the floating navbar\n pill so the heading isn't clipped at the top. The live affinda.com\n reference at 1280 vw renders the heading roughly 180 px below the\n viewport top — pad accordingly. (Earlier value of 80 px clipped the\n heading behind the navbar; caught by qa/regression-compare in the\n site repo.) */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 180px;\n}\n\n/* -----------------------------------------------------------------\n Grid layout (photo + illustration variants)\n ----------------------------------------------------------------- */\n.hero__grid {\n display: grid;\n grid-template-columns: 5fr 7fr;\n gap: 40px;\n align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n grid-template-columns: 1fr auto;\n gap: 48px;\n}\n\n/* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n illustration column too wide, which pinches the heading down to\n 4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n matching the live affinda.com reference. */\n:host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n /* Small inset pushes heading inward from the hard container edge —\n matches the live .page-banner-text treatment. Only applied to\n left-aligned variants. */\n padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n `align-items: center` on the grid, this shifts the heading visually\n upward so the subtitle lines up near the image's vertical centre. */\n padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n padding-left: 0;\n text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n display: none;\n}\n\n.hero__badge:has(*) {\n margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n display: inline-block;\n}\n\n.hero__buttons {\n margin-top: 32px;\n}\n\n.hero__buttons:empty {\n display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n display: flex;\n justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n Photo (inkwell-photo)\n Blob-mask shape defined once as a CSS custom property so Stencil\n doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n ----------------------------------------------------------------- */\n:host {\n --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n min-height: var(--af-hero-image-min-height);\n overflow: visible;\n margin-top: var(--af-hero-image-lift);\n position: relative;\n z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n display: block;\n width: 100%;\n height: auto;\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n Descendant selector per repo convention. */\n.hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask);\n mask-image: var(--af-hero-blob-mask);\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n Illustration (inkwell/soft-clay/mist-green -illustration)\n ----------------------------------------------------------------- */\n.hero__illustration {\n flex: 0 0 auto;\n width: 100%;\n max-width: 432px;\n line-height: 0;\n justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 16px;\n}\n\n/* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n tower past the text column. 540 px matches the live treatment for\n the /industries + /integrations heroes. */\n:host(.hero--inkwell-illustration) .hero__illustration {\n max-width: 540px;\n}\n\n/* -----------------------------------------------------------------\n Logos-below overlap\n Painted in the theme's background token so the strip cleanly overlaps\n the bottom of the photo on the -photo variant. Empty = collapsed.\n ----------------------------------------------------------------- */\n.hero__logos {\n position: relative;\n z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: -240px;\n padding-top: 48px;\n padding-bottom: 48px;\n background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n border-top: 1px solid\n var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n Mobile / tablet\n ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n :host(.hero--pad-default) .hero__inner,\n :host(.hero--pad-loose) .hero__inner {\n padding-top: 112px;\n }\n\n /* Centered variant still needs a touch more clearance under the\n navbar pill on tablet. */\n :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n padding-top: 144px;\n }\n\n .hero__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n :host(.hero--soft-clay-illustration) .hero__grid,\n :host(.hero--mist-green-illustration) .hero__grid,\n :host(.hero--inkwell-illustration) .hero__grid {\n grid-template-columns: 1fr;\n }\n\n .hero__copy {\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .hero__illustration {\n max-width: 360px;\n margin-inline: auto;\n justify-self: center;\n }\n\n /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n mobile variant, and drop the lift so the image doesn't crash into\n the navbar. */\n .hero__image {\n margin-top: 0;\n min-height: auto;\n }\n\n :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n :host(.hero--inkwell-photo) .hero__image--masked img {\n -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n mask-image: var(--af-hero-blob-mask-mobile);\n }\n\n :host(.hero--inkwell-photo) .hero__logos:has(*) {\n margin-top: 24px;\n padding-top: 32px;\n padding-bottom: 32px;\n background: transparent;\n border-top: none;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@affinda/wc",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
package/dist/affinda/p-7d08db58.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as e,h as o,H as a,a as r}from"./p-C4WBekD2.js";const i=".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}}";const t={"inkwell-photo":"inkwell","inkwell-illustration":"inkwell","inkwell-centered":"inkwell","soft-clay-illustration":"soft-clay","mist-green-illustration":"mist-green"};const s=class{constructor(o){e(this,o);this.variant="inkwell-photo";this.heading="";this.description="";this.topPad="default";this.maxWidth=620;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 t[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 e=this.variant==="inkwell-centered"?"center":"left";return o("div",{class:"hero__copy"},o("div",{class:"hero__badge"},o("slot",{name:"badge"})),o("af-typography-lockup",{"heading-size":"1","text-alignment":e,"max-width":String(this.maxWidth)},this.heading?o("h1",null,this.heading):o("slot",null),this.description?o("span",{slot:"description"},this.description):o("slot",{name:"description",slot:"description"})),o("div",{class:"hero__buttons"},o("slot",{name:"buttons"})))}renderPhoto(){return o("div",{class:{hero__image:true,"hero__image--masked":this.maskImage}},o("slot",{name:"image"}))}renderIllustration(){return o("div",{class:"hero__illustration"},o("slot",{name:"illustration"}))}render(){const e=this.variant;const r=e==="inkwell-centered";const i=e==="inkwell-photo";const t=e==="inkwell-illustration"||e==="soft-clay-illustration"||e==="mist-green-illustration";return o(a,{key:"6e8e522c6593a79fbb93eaf421c6b3f41a2072f5",class:{[`hero--${e}`]:true,[`hero--pad-${this.topPad}`]:true,[`hero--theme-${this.theme}`]:true,"hero--float-navbar":this.resolvedFloatNavbar}},o("af-section",{key:"dc6181658d53a8c7166d3f090df9666d35310338",theme:this.theme,padding:"none",container:false,class:"hero__section"},r&&o("div",{key:"b8357ea1cc08dafa3a3f5e4cd8c545bef1e3df1c",class:"hero__paperclip","aria-hidden":"true"},o("slot",{key:"da4b0dcb83e6e8c09b9962ba7d0c09e02f6721c5",name:"paperclip"})),o("af-container",{key:"0dbffc963a56e53ed7206b59cccfd74f5bd792ee",class:"hero__inner"},r?this.renderCopy():o("div",{class:"hero__grid"},this.renderCopy(),i&&this.renderPhoto(),t&&this.renderIllustration())),o("div",{key:"d4316dbc5ba954ce2a52d73dfb73575b77f394db",class:"hero__logos"},o("slot",{key:"d9ff55a2c238d5db322aef90cb28006d91f7dffc",name:"logos-below"}))))}get el(){return r(this)}};s.style=i;export{s as af_hero};
2
- //# sourceMappingURL=p-7d08db58.entry.js.map