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

@affinda/wc 0.0.28 → 0.1.0

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

Files changed (485) hide show

package/dist/cjs/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js","sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx","src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx","src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=scoped","src/components/af-nav-item/af-nav-item.tsx","src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=scoped","src/components/af-navbar/af-navbar.tsx","src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.heading {\n margin: 0;\n padding: 0;\n font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n font-weight: var(--font-weight-regular, 400);\n /* Inherit color from theme context via CSS custom property /\n color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n}\n\n/ Alignment - inherits from --af-text-align if set, otherwise uses explicit align prop /\n.align-inherit {\n text-align: var(--af-text-align, left);\n}\n\n.align-left {\n text-align: left;\n}\n\n.align-center {\n text-align: center;\n}\n\n.align-right {\n text-align: right;\n}\n\n/\n * Fluid typography: font-size scales continuously with viewport width between\n * the mobile size (anchored at 375px viewport) and the desktop size\n * (anchored at 1280px viewport) using clamp().\n \n Formula: clamp(mobilePx, Avw + Bpx, desktopPx)\n * A = (desktop - mobile) / (1280 - 375) * 100 (vw slope)\n * B = mobile - A/100 * 375 (px intercept)\n \n Each level exposes a --font-size-heading-{level}-fluid custom property so\n * consumers can still override the resulting size without defeating clamp().\n /\n\n/ Heading XL /\n.level-xl {\n font-size: var(--font-size-heading-xl-fluid, clamp(50px, 3.31vw + 37.57px, 80px));\n line-height: var(--line-height-heading-tight, 1);\n}\n\n/ Heading 1 /\n.level-1 {\n font-size: var(--font-size-heading-1-fluid, clamp(38px, 1.99vw + 30.54px, 56px));\n line-height: var(--line-height-heading-tight, 1);\n}\n\n/ Heading 2 /\n.level-2 {\n font-size: var(--font-size-heading-2-fluid, clamp(32px, 1.33vw + 27.03px, 44px));\n line-height: var(--line-height-heading-tight, 1);\n}\n\n/ Heading 3 /\n.level-3 {\n font-size: var(--font-size-heading-3-fluid, clamp(25px, 0.99vw + 21.27px, 34px));\n line-height: var(--line-height-heading-tight, 1);\n}\n\n/ Heading 4 /\n.level-4 {\n font-size: var(--font-size-heading-4-fluid, clamp(20px, 0.44vw + 18.34px, 24px));\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n .level-4 {\n line-height: var(--line-height-heading-relaxed, 1.2);\n }\n}\n\n/ Heading 5 /\n.level-5 {\n font-size: var(--font-size-heading-5-fluid, clamp(18px, 0.22vw + 17.17px, 20px));\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n .level-5 {\n line-height: var(--line-height-heading-relaxed, 1.2);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/\n Heading component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n /\n@Component({\n tag: 'af-heading',\n styleUrl: 'af-heading.css',\n shadow: true\n})\nexport class AfHeading {\n /* Heading level /\n @Prop() level: 'xl' \| '1' \| '2' \| '3' \| '4' \| '5' = '1';\n\n /* Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) /\n @Prop() align: 'inherit' \| 'left' \| 'center' \| 'right' = 'inherit';\n\n private getHeadingTag() {\n // Map display levels to semantic HTML tags\n const tagMap: Record<string, string> = {\n 'xl': 'h1',\n '1': 'h1',\n '2': 'h2',\n '3': 'h3',\n '4': 'h4',\n '5': 'h5'\n };\n return tagMap[this.level] \|\| 'h1';\n }\n\n render() {\n const Tag = this.getHeadingTag() as any;\n\n return (\n <Tag\n class={{\n 'heading': true,\n [`level-${this.level}`]: true,\n [`align-${this.align}`]: true\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.text {\n margin: 0;\n padding: 0;\n font-family: var(--typography-bodyfont, 'NeuSans', Arial, sans-serif);\n font-weight: var(--font-weight-regular, 400);\n / Inherit color from theme context via CSS custom property /\n color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n letter-spacing: var(--letter-spacing-body, 0);\n / Inherit alignment from parent context (e.g. typography lockup), default to left /\n text-align: var(--af-text-align, left);\n}\n\n/ Alignment /\n.align-left {\n text-align: left;\n}\n\n.align-center {\n text-align: center;\n}\n\n.align-right {\n text-align: right;\n}\n\n/ Body variants /\n.variant-xlarge {\n font-size: var(--font-size-body-xlarge, 22px);\n line-height: var(--line-height-body-xlarge, 28px);\n}\n\n.variant-large {\n font-size: var(--font-size-body-large, 18px);\n line-height: var(--line-height-body-large, 26px);\n}\n\n.variant-medium {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n}\n\n.variant-small {\n font-size: var(--font-size-body-small, 14px);\n line-height: var(--line-height-body-small, 20px);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/\n Text/body component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n /\n@Component({\n tag: 'af-text',\n styleUrl: 'af-text.css',\n shadow: true\n})\nexport class AfText {\n /* Text variant /\n @Prop() variant: 'xlarge' \| 'large' \| 'medium' \| 'small' = 'medium';\n\n /* Visual alignment. When not set, inherits from parent context (e.g. typography lockup). /\n @Prop() align?: 'left' \| 'center' \| 'right';\n\n /* Semantic element to render /\n @Prop() as: 'p' \| 'span' \| 'div' \| 'label' = 'p';\n\n render() {\n const Tag = this.as as any;\n\n return (\n <Tag\n class={{\n 'text': true,\n [`variant-${this.variant}`]: true,\n [`align-${this.align}`]: !!this.align\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n",":host {\n display: inline-block;\n}\n\n/ Mobile breakpoint - full width block display /\n:host([breakpoint=\"mobile\"]) {\n display: block;\n width: 100%;\n}\n\n.nav-link {\n text-decoration: none;\n color: inherit;\n display: block;\n}\n\n.nav-item {\n display: flex;\n align-items: center;\n gap: 8px;\n box-sizing: border-box;\n cursor: pointer;\n}\n\n/ Primary hierarchy - bold main navigation /\n.hierarchy-primary {\n padding: 12px;\n justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n gap: 10px;\n}\n\n/ Primary variant 01 - darker /\n.hierarchy-primary.variant-01 {\n font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-size: 16px;\n font-weight: var(--font-weight-book, 500);\n line-height: 20px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/ Add transparent border to prevent layout shift on hover /\n.hierarchy-primary.variant-01 .label-container {\n border-bottom: 1px solid transparent;\n}\n\n/ Primary variant 02 - lighter for light backgrounds /\n.hierarchy-primary.variant-02 {\n font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n font-size: 16px;\n font-weight: var(--font-weight-regular, 400);\n line-height: 20px;\n color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/ Hover state for primary variant-01 - show underline /\n.hierarchy-primary.variant-01:hover .label-container {\n border-bottom-color: currentColor;\n}\n\n/ Active state for primary variant-01 - thicker border /\n.hierarchy-primary.variant-01.active .label-container {\n border-bottom: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n / Adjust margin to prevent shift from 1px to 2px border /\n margin-bottom: -1px;\n}\n\n/ Hover and active states for variant-02 (light backgrounds) - no border /\n.hierarchy-primary.variant-02:hover {\n background-color: rgba(20, 52, 59, 0.04);\n border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n background-color: rgba(20, 52, 59, 0.08);\n border-radius: 8px;\n}\n\n/ Secondary hierarchy - smaller sub-navigation /\n.hierarchy-secondary {\n padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n display: flex;\n align-items: center;\n flex: 1;\n min-height: 24px;\n gap: 10px;\n}\n\n/ Secondary variant 01 - medium weight /\n.hierarchy-secondary.variant-01 {\n font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/ Secondary variant 02 - regular weight /\n.hierarchy-secondary.variant-02 {\n font-family: var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/ Hover state for secondary - underline text /\n.hierarchy-secondary:hover .label-container {\n text-decoration: underline;\n}\n\n/ Focus states for accessibility /\n.nav-item:focus-within {\n outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Remove default focus outline on link /\n.nav-link:focus {\n outline: none;\n}\n\n.nav-link:focus-visible + .nav-item,\n:host(:focus-visible) .nav-item {\n outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Mobile breakpoint styles - explicit via prop /\n.hierarchy-primary.breakpoint-mobile {\n padding: 20px 12px;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n width: 100%;\n justify-content: flex-start;\n}\n\n.hierarchy-primary.breakpoint-mobile .label-container {\n flex: 1;\n justify-content: flex-start;\n}\n\n.hierarchy-primary.variant-01.breakpoint-mobile {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n}\n\n.hierarchy-primary.variant-02.breakpoint-mobile {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n}\n\n/ Mobile breakpoint for secondary hierarchy /\n.hierarchy-secondary.breakpoint-mobile {\n padding: 2px 0;\n height: 40px;\n}\n\n.hierarchy-secondary.breakpoint-mobile .label-container {\n min-height: 24px;\n}\n\n/ Mobile removes the hover underline effect /\n.hierarchy-primary.breakpoint-mobile.variant-01 .label-container {\n border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01:hover .label-container {\n border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01.active .label-container {\n border-bottom-color: transparent;\n margin-bottom: 0;\n}\n\n/ Icon sizing and styling /\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n}\n\n/ Icon color inheritance for primary hierarchy /\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-right\"]) {\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-right\"]) {\n color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/ Icon rotation on active for mobile primary with dropdown indicator.\n Desktop chevrons stay static — rotating on hover/active felt fidgety\n and the open/closed state is already clear from the dropdown panel. /\n.hierarchy-primary.breakpoint-mobile.active ::slotted([slot=\"icon-right\"]) {\n transform: rotate(180deg);\n}\n\n/ Secondary hierarchy - smaller icons /\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n width: 20px;\n height: 20px;\n}\n\n/ Icon color inheritance for secondary hierarchy /\n.hierarchy-secondary.variant-01 ::slotted([slot=\"icon-right\"]) {\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-secondary.variant-02 ::slotted([slot=\"icon-right\"]) {\n color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/ Fallback media query for when breakpoint prop is not set /\n/ ≤ tablet /\n@media (max-width: 1023px) {\n :host([breakpoint=\"auto\"]) .hierarchy-primary,\n :host(:not([breakpoint])) .hierarchy-primary {\n padding: 20px 12px;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n width: 100%;\n }\n\n :host([breakpoint=\"auto\"]) .hierarchy-primary .label-container,\n :host(:not([breakpoint])) .hierarchy-primary .label-container {\n flex: 1;\n justify-content: flex-start;\n }\n\n :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-01,\n :host(:not([breakpoint])) .hierarchy-primary.variant-01 {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n }\n\n :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-02,\n :host(:not([breakpoint])) .hierarchy-primary.variant-02 {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n }\n\n / Icon rotation on active for auto/responsive breakpoint /\n :host([breakpoint=\"auto\"]) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]),\n :host(:not([breakpoint])) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]) {\n transform: rotate(180deg);\n }\n\n / Disable desktop hover rotation in mobile view /\n :host([breakpoint=\"auto\"]) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]),\n :host(:not([breakpoint])) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]) {\n transform: none;\n }\n\n :host([breakpoint=\"auto\"]) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]),\n :host(:not([breakpoint])) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]) {\n transform: rotate(180deg);\n }\n}\n","import { Component, Element, h, Prop, Host } from '@stencil/core';\n\n/\n A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n \n Dropdown trigger a11y: when the host carries a `data-dropdown=\"id\"`\n * attribute and has no `href`, the inner wrapper is promoted to\n * `role=\"button\"` with `tabindex=\"0\"` and keyboard activation (Enter/Space),\n * so keyboard users can open the matching dropdown panel just like a\n * pointer click. The companion `af-navbar` keeps `aria-expanded` on the\n * host in sync with the active dropdown.\n /\n@Component({\n tag: 'af-nav-item',\n styleUrl: 'af-nav-item.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavItem {\n @Element() el!: HTMLElement;\n\n /\n Visual hierarchy level of the navigation item\n * - 'primary': Bold, main navigation (larger text, prominent styling)\n * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n /\n @Prop() hierarchy: 'primary' \| 'secondary' = 'primary';\n\n /\n Visual variant within the hierarchy level\n * - '01': Darker/more prominent styling\n * - '02': Lighter/more subtle styling\n /\n @Prop() variant: '01' \| '02' = '01';\n\n /\n Breakpoint variant for responsive styling\n * - 'desktop': Desktop-specific styles\n * - 'mobile': Mobile-specific styles (larger text, different spacing)\n /\n @Prop({ reflect: true }) breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n URL to navigate to when clicked\n /\n @Prop() href?: string;\n\n /\n Whether this nav item is currently active/selected\n /\n @Prop() active: boolean = false;\n\n /\n Promote Enter and Space on a focused trigger into a synthetic click\n * so the surrounding af-navbar (which listens on click) treats the\n * keyboard activation identically to a pointer click.\n /\n private handleTriggerKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ' \|\| event.key === 'Spacebar') {\n event.preventDefault();\n this.el.click();\n }\n };\n\n render() {\n const classes = {\n 'nav-item': true,\n [`hierarchy-${this.hierarchy}`]: true,\n [`variant-${this.variant}`]: true,\n [`breakpoint-${this.breakpoint}`]: true,\n 'active': this.active,\n };\n\n const innerContent = [\n <slot name=\"icon-left\"></slot>,\n <div class=\"label-container\">\n <slot></slot>\n </div>,\n <slot name=\"icon-right\"></slot>,\n ];\n\n if (this.href) {\n return (\n <Host>\n <a href={this.href} class=\"nav-link\">\n <div class={classes}>{innerContent}</div>\n </a>\n </Host>\n );\n }\n\n const isDropdownTrigger = this.el.hasAttribute('data-dropdown');\n if (isDropdownTrigger) {\n return (\n <Host>\n <div\n class={classes}\n role=\"button\"\n tabindex={0}\n aria-haspopup=\"menu\"\n onKeyDown={this.handleTriggerKeyDown}\n >\n {innerContent}\n </div>\n </Host>\n );\n }\n\n return <Host>{<div class={classes}>{innerContent}</div>}</Host>;\n }\n}\n",":host {\n display: block;\n width: 100%;\n}\n\n/ Spacer element that sits in normal document flow to prevent content overlap /\n.navbar-spacer {\n height: 100px; / Accounts for navbar height + top margin /\n}\n\n/ Theme variants for spacer background - matches section themes /\n.navbar-spacer.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n}\n\n.navbar-spacer.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.navbar-spacer.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.navbar-spacer.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n}\n\n/ Sticky navbar that floats above the spacer /\n.navbar-container {\n position: fixed;\n / Add safe-area-inset-top so the pill drops below the iOS notch / status bar\n when the page uses viewport-fit=cover. Falls back to the original 32px. /\n top: max(32px, env(safe-area-inset-top));\n left: 0;\n right: 0;\n z-index: 10;\n / Horizontal padding honours safe-area-inset-left/right for landscape on\n notched devices; the inset is added on top of the existing 80px gutter. /\n padding: 0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));\n box-sizing: border-box;\n}\n\n.navbar {\n background: var(--colour-background-white, #ffffff);\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 8px 8px 40px;\n box-sizing: border-box;\n flex-wrap: nowrap; / Prevent wrapping /\n}\n\n/ Left section /\n.navbar-left {\n display: flex;\n align-items: center;\n gap: 32px;\n flex-shrink: 0;\n}\n\n.logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/ Mobile menu toggle button /\n.mobile-menu-toggle {\n display: none;\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--colour-brand-inkwell, #14343b);\n margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n display: block;\n}\n\n.nav-links {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n}\n\n/ Right section /\n.navbar-right {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.nav-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.nav-button {\n display: flex;\n align-items: center;\n}\n\n/ Dropdown container. The container's top is raised 8px into what\n was previously a blank gap between the nav pill and the panel, and\n that 8px is absorbed as container top-padding — so the visible panel\n stays put, but the hoverable region is now continuous between the\n nav pill and the dropdown. Without this, the mouse crosses an\n un-hovered strip on its way from trigger to panel and the navbar's\n mouseleave handler fires a close. /\n.dropdown-container {\n position: absolute;\n top: 100px;\n left: 0;\n right: 0;\n padding: 8px 80px 0;\n pointer-events: none;\n opacity: 0;\n transform: translateY(-8px);\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown-container.is-open {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n}\n\n.dropdown-panel {\n background: var(--colour-background-base, #ffffff);\n border-radius: 32px;\n overflow: hidden;\n box-shadow: 0 4px 24px rgba(20, 52, 59, 0.12);\n}\n\n/ Hide empty dropdown slots /\n.dropdown-panel:empty {\n display: none;\n}\n\n/ Mobile menu panel - separate from navbar for proper positioning /\n.mobile-menu-panel {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--colour-background-base, #ffffff);\n z-index: 9;\n / Full-viewport drawer: pad the top below the notch, the bottom above the\n home indicator, and the sides away from landscape edge cutouts. /\n padding:\n max(100px, calc(100px + env(safe-area-inset-top)))\n calc(16px + env(safe-area-inset-right))\n max(24px, env(safe-area-inset-bottom))\n calc(16px + env(safe-area-inset-left));\n overflow-y: auto;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n.mobile-menu-panel.is-open {\n display: block;\n opacity: 1;\n pointer-events: auto;\n}\n\n/ Mobile CTA button container /\n.mobile-button-container {\n margin-bottom: 8px;\n}\n\n.mobile-button-container ::slotted() {\n width: 100%;\n}\n\n/* Mobile menu content - flex column ensures items stack vertically /\n.mobile-menu-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/ Force slotted items to take full width for composability /\n.mobile-menu-content ::slotted() {\n flex: 0 0 auto;\n width: 100%;\n}\n\n/* \n * Breakpoint 1: Hide \"Talk to us\" and \"Log in\" (nav-actions) \n * This happens first as the viewport gets narrower\n * Matches affinda.com behavior at ~1100px\n /\n@media (max-width: 1099px) {\n .nav-actions {\n display: none;\n }\n \n .navbar-right {\n gap: 0;\n }\n}\n\n/ Tablet adjustments /\n@media (max-width: 1024px) {\n .navbar-spacer {\n height: 88px;\n }\n\n .navbar-container {\n top: max(24px, env(safe-area-inset-top));\n padding: 0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left));\n }\n\n .navbar-left {\n gap: 24px;\n }\n\n .nav-links {\n gap: 4px;\n }\n\n .dropdown-container {\n padding: 0 40px;\n }\n}\n\n/ \n * Breakpoint 2: Switch to hamburger menu\n * Matches affinda.com behavior at 991px\n /\n@media (max-width: 991px) {\n .navbar-spacer {\n height: 72px;\n }\n\n .navbar-container {\n top: max(16px, env(safe-area-inset-top));\n padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));\n z-index: 11; / Above mobile menu panel /\n }\n\n .navbar {\n padding: 8px 8px 8px 24px; / Figma: 8px padding right, 24px left on mobile /\n flex-direction: row;\n border-radius: 9999px; / Keep pill shape on mobile /\n gap: 0;\n }\n\n .navbar-left {\n width: auto;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n gap: 16px;\n flex: 1;\n }\n\n / Show hamburger button on mobile /\n .mobile-menu-toggle {\n display: flex;\n padding: 12px;\n margin-left: auto;\n border-radius: 9999px;\n border: 1px solid var(--colour-brand-inkwell, #14343b);\n }\n\n .mobile-menu-toggle:hover {\n background: rgba(20, 52, 59, 0.05);\n }\n\n / Hide nav links on mobile - they're in the mobile menu panel /\n .nav-links {\n display: none;\n }\n\n / Hide right section on mobile - button is in mobile menu panel /\n .navbar-right {\n display: none;\n }\n\n / Hide desktop dropdown on mobile /\n .dropdown-container {\n display: none;\n }\n\n / Mobile menu panel adjustments /\n .mobile-menu-panel {\n padding-top: max(88px, calc(88px + env(safe-area-inset-top))); / Accounts for navbar height + notch /\n }\n\n .mobile-button-container {\n padding: 0 12px;\n margin-bottom: 8px;\n }\n\n .mobile-button-container ::slotted(af-button),\n .mobile-button-container ::slotted(button) {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n}\n\n/ ==========================================================================\n Force Mobile Mode\n Apply mobile styles regardless of viewport when force-mobile attribute is set\n ========================================================================== /\n\n:host([force-mobile]) .navbar-spacer {\n height: 72px;\n}\n\n:host([force-mobile]) .navbar-container {\n top: max(16px, env(safe-area-inset-top));\n padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));\n z-index: 11;\n}\n\n:host([force-mobile]) .navbar {\n padding: 8px 8px 8px 24px;\n flex-direction: row;\n border-radius: 9999px;\n gap: 0;\n}\n\n:host([force-mobile]) .navbar-left {\n width: auto;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n gap: 16px;\n flex: 1;\n}\n\n:host([force-mobile]) .mobile-menu-toggle {\n display: flex;\n padding: 12px;\n margin-left: auto;\n border-radius: 9999px;\n border: 1px solid var(--colour-brand-inkwell, #14343b);\n}\n\n:host([force-mobile]) .mobile-menu-toggle:hover {\n background: rgba(20, 52, 59, 0.05);\n}\n\n:host([force-mobile]) .nav-links {\n display: none;\n}\n\n:host([force-mobile]) .navbar-right {\n display: none;\n}\n\n:host([force-mobile]) .nav-actions {\n display: none;\n}\n\n:host([force-mobile]) .dropdown-container {\n display: none;\n}\n\n:host([force-mobile]) .mobile-menu-panel {\n padding-top: max(88px, calc(88px + env(safe-area-inset-top)));\n}\n\n:host([force-mobile]) .mobile-menu-panel.is-open {\n display: block;\n opacity: 1;\n pointer-events: auto;\n}\n\n:host([force-mobile]) .mobile-button-container {\n padding: 0 12px;\n margin-bottom: 8px;\n}\n\n:host([force-mobile]) .mobile-button-container ::slotted(af-button),\n:host([force-mobile]) .mobile-button-container ::slotted(button) {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n/ Force mobile: flex column ensures items stack vertically /\n:host([force-mobile]) .mobile-menu-content {\n display: flex;\n flex-direction: column;\n}\n\n/ Force mobile: slotted items take full width for composability /\n:host([force-mobile]) .mobile-menu-content ::slotted() {\n flex: 0 0 auto;\n width: 100%;\n}\n","import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/*\n A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n * \n * Slots:\n * - `logo` - Logo area (defaults to Affinda logo if empty)\n * - `start` - Primary navigation links (left side, desktop)\n * - `end` - Secondary/utility links (right side)\n * - `button` - Call-to-action button\n * - `dropdowns` - One or more dropdown panels, each a `<div data-for=\"id\">`\n * where `id` matches the `data-dropdown=\"id\"` attribute on the trigger.\n * Clicking a trigger toggles the matching panel; only one is visible at\n * a time.\n * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)\n * - `mobile-button` - CTA button for mobile menu (appears at top)\n /\n@Component({\n tag: 'af-navbar',\n styleUrl: 'af-navbar.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavbar {\n @Element() el!: HTMLElement;\n\n @State() mobileMenuOpen: boolean = false;\n \n /* The currently open dropdown identifier (null if none open) /\n @State() activeDropdown: string \| null = null;\n\n /* Whether to show the default Affinda logo when no logo slot content is provided /\n @Prop() showDefaultLogo: boolean = true;\n\n /* Theme for the spacer background - should match the section below the navbar /\n @Prop() theme?: 'white' \| 'inkwell' \| 'mist-green' \| 'soft-clay';\n\n /* Force mobile layout regardless of viewport size (useful for testing/stories) /\n @Prop({ reflect: true }) forceMobile: boolean = false;\n\n private toggleMobileMenu = () => {\n this.mobileMenuOpen = !this.mobileMenuOpen;\n // Close any open dropdown when toggling mobile menu\n this.activeDropdown = null;\n };\n\n /\n Opens a dropdown by its identifier\n /\n private openDropdown = (dropdownId: string) => {\n this.activeDropdown = dropdownId;\n };\n\n /\n Closes the currently open dropdown\n /\n private closeDropdown = () => {\n this.activeDropdown = null;\n };\n\n /\n Toggles a dropdown by its identifier\n /\n private toggleDropdown = (dropdownId: string) => {\n if (this.activeDropdown === dropdownId) {\n this.activeDropdown = null;\n } else {\n this.activeDropdown = dropdownId;\n }\n };\n\n /* Timer id used to debounce hover-driven closes. /\n private closeTimer?: number;\n\n /\n The trigger element that opened the currently active dropdown. Tracked\n * so an Esc keypress can close the dropdown and restore focus to the\n * trigger, matching WAI-ARIA menu-button guidance.\n /\n private lastActiveTrigger?: HTMLElement;\n\n /\n Open the dropdown matching a `[data-dropdown]` trigger on click —\n * acts as a toggle so keyboard/touch users can still dismiss it.\n /\n @Listen('click')\n handleTriggerClick(event: MouseEvent) {\n const target = event.target as HTMLElement \| null;\n const trigger = target?.closest?.('[data-dropdown]') as HTMLElement \| null;\n if (!trigger \|\| !this.el.contains(trigger)) return;\n const id = trigger.getAttribute('data-dropdown');\n if (!id) return;\n event.preventDefault();\n event.stopPropagation();\n this.cancelScheduledClose();\n this.lastActiveTrigger = trigger;\n this.toggleDropdown(id);\n }\n\n /\n Open the dropdown matching a `[data-dropdown]` trigger on hover.\n * Uses mouseover (which bubbles) and checks for the trigger ancestor.\n /\n @Listen('mouseover')\n handleHover(event: MouseEvent) {\n const target = event.target as HTMLElement \| null;\n const trigger = target?.closest?.('[data-dropdown]') as HTMLElement \| null;\n if (!trigger \|\| !this.el.contains(trigger)) return;\n const id = trigger.getAttribute('data-dropdown');\n if (!id \|\| this.activeDropdown === id) {\n this.cancelScheduledClose();\n return;\n }\n this.cancelScheduledClose();\n this.lastActiveTrigger = trigger;\n this.openDropdown(id);\n }\n\n /\n When the pointer leaves the navbar entirely (including any open\n * dropdown panel), schedule a close. Re-entering cancels it.\n /\n @Listen('mouseleave')\n handleHostLeave() {\n this.scheduleClose();\n }\n\n @Listen('mouseenter')\n handleHostEnter() {\n this.cancelScheduledClose();\n }\n\n private scheduleClose() {\n // Short 100ms debounce so the mouse has time to cross any tiny\n // dead-zone between the nav pill, the dropdown panel, and the\n // items inside it without accidentally closing the panel. A\n // re-entering mouseenter on the host cancels the pending close.\n this.cancelScheduledClose();\n this.closeTimer = window.setTimeout(() => {\n this.closeDropdown();\n this.closeTimer = undefined;\n }, 100);\n }\n\n private cancelScheduledClose() {\n if (this.closeTimer !== undefined) {\n clearTimeout(this.closeTimer);\n this.closeTimer = undefined;\n }\n }\n\n /\n Handle clicks outside the navbar to close dropdowns\n /\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdown();\n }\n }\n\n /\n Keep the visibility of slotted dropdown panels, and the `data-active`\n * flag on their triggers, in sync with the currently active dropdown.\n * Each panel lives in the `dropdowns` slot and carries a `data-for`\n * attribute that matches its trigger's id.\n /\n componentDidLoad() {\n this.syncDropdownState();\n }\n\n componentDidUpdate() {\n this.syncDropdownState();\n }\n\n private syncDropdownState() {\n this.el.querySelectorAll<HTMLElement>('[data-for]').forEach((panel) => {\n if (!this.el.contains(panel)) return;\n panel.hidden = panel.getAttribute('data-for') !== this.activeDropdown;\n });\n this.el.querySelectorAll<HTMLElement>('[data-dropdown]').forEach((trigger) => {\n if (!this.el.contains(trigger)) return;\n const active = trigger.getAttribute('data-dropdown') === this.activeDropdown;\n if (active) trigger.setAttribute('data-active', '');\n else trigger.removeAttribute('data-active');\n trigger.setAttribute('aria-expanded', active ? 'true' : 'false');\n });\n }\n\n /\n Handle escape key to close dropdowns. If a dropdown is open, restore\n * focus to the trigger that opened it so keyboard users don't lose\n * their place in the tab order.\n /\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.activeDropdown !== null) {\n const toFocus = this.lastActiveTrigger;\n this.closeDropdown();\n toFocus?.focus?.();\n }\n }\n\n render() {\n const hasDropdown = this.activeDropdown !== null;\n\n return (\n <Host class={{ 'has-dropdown-open': hasDropdown }}>\n {/ Spacer element to prevent content from being hidden behind sticky navbar /}\n <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n \n <nav class=\"navbar-container\">\n <div class=\"navbar theme-white\">\n {/ Left section: Logo + Nav Links /}\n <div class=\"navbar-left\">\n <div class=\"logo\">\n <slot name=\"logo\">\n {/ Default Affinda logo if no slot content provided /}\n {this.showDefaultLogo && <af-logo></af-logo>}\n </slot>\n </div>\n \n {/ Hamburger menu button - mobile only /}\n <button \n class=\"mobile-menu-toggle\"\n onClick={this.toggleMobileMenu}\n aria-label=\"Toggle navigation menu\"\n aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n >\n {this.mobileMenuOpen ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n )}\n </button>\n \n <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n <slot name=\"start\"></slot>\n </div>\n </div>\n\n {/ Right section: Actions + Button /}\n <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n <div class=\"nav-actions\">\n <slot name=\"end\"></slot>\n </div>\n <div class=\"nav-button\">\n <slot name=\"button\"></slot>\n </div>\n </div>\n </div>\n\n {/ Dropdown panel container /}\n <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n <div class=\"dropdown-panel theme-white\">\n <slot name=\"dropdowns\"></slot>\n </div>\n </div>\n </nav>\n\n {/ Mobile menu panel /}\n <div class={`mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}`}>\n {/ Mobile CTA button at top /}\n <div class=\"mobile-button-container\">\n <slot name=\"mobile-button\">\n <slot name=\"button\"></slot>\n </slot>\n </div>\n \n {/ Mobile navigation content /}\n <div class=\"mobile-menu-content\">\n <slot name=\"mobile-menu\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n",":host {\n display: inline-block;\n color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n}\n\n.logo-svg {\n display: block;\n / Maintain aspect ratio based on viewBox (9290:1432 ≈ 6.49:1) /\n width: auto;\n height: 22px;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/\n Affinda logo component\n */\n@Component({\n tag: 'af-logo',\n styleUrl: 'af-logo.css',\n shadow: true\n})\nexport class AfLogo {\n render() {\n return (\n <Host>\n <svg \n class=\"logo-svg\" \n viewBox=\"0 0 9290 1432\" \n aria-label=\"Affinda\"\n role=\"img\"\n >\n <path \n fill=\"currentColor\" \n d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n />\n <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n <path \n fill=\"currentColor\" \n d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n />\n <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n </svg>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}
1	+ {"version":3,"file":"af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js","sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx","src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx","src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=scoped","src/components/af-nav-item/af-nav-item.tsx","src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=scoped","src/components/af-navbar/af-navbar.tsx","src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.heading {\n margin: 0;\n padding: 0;\n font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n font-weight: var(--font-weight-regular, 400);\n /* Inherit color from theme context via CSS custom property /\n color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n}\n\n/ Alignment - inherits from --af-text-align if set, otherwise uses explicit align prop /\n.align-inherit {\n text-align: var(--af-text-align, left);\n}\n\n.align-left {\n text-align: left;\n}\n\n.align-center {\n text-align: center;\n}\n\n.align-right {\n text-align: right;\n}\n\n/\n * Fluid typography: font-size scales continuously with viewport width between\n * the mobile size (anchored at 375px viewport) and the desktop size\n * (anchored at 1280px viewport) using clamp().\n \n Formula: clamp(mobilePx, Avw + Bpx, desktopPx)\n * A = (desktop - mobile) / (1280 - 375) * 100 (vw slope)\n * B = mobile - A/100 * 375 (px intercept)\n \n Each level exposes a --font-size-heading-{level}-fluid custom property so\n * consumers can still override the resulting size without defeating clamp().\n /\n\n/ Heading XL /\n.level-xl {\n font-size: var(--font-size-heading-xl-fluid, clamp(50px, 3.31vw + 37.57px, 80px));\n line-height: var(--line-height-heading-tight, 1);\n}\n\n/ Heading 1 /\n.level-1 {\n font-size: var(--font-size-heading-1-fluid, clamp(38px, 1.99vw + 30.54px, 56px));\n line-height: var(--line-height-heading-tight, 1);\n}\n\n/ Heading 2 /\n.level-2 {\n font-size: var(--font-size-heading-2-fluid, clamp(32px, 1.33vw + 27.03px, 44px));\n line-height: var(--line-height-heading-tight, 1);\n}\n\n/ Heading 3 /\n.level-3 {\n font-size: var(--font-size-heading-3-fluid, clamp(25px, 0.99vw + 21.27px, 34px));\n line-height: var(--line-height-heading-tight, 1);\n}\n\n/ Heading 4 /\n.level-4 {\n font-size: var(--font-size-heading-4-fluid, clamp(20px, 0.44vw + 18.34px, 24px));\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n .level-4 {\n line-height: var(--line-height-heading-relaxed, 1.2);\n }\n}\n\n/ Heading 5 /\n.level-5 {\n font-size: var(--font-size-heading-5-fluid, clamp(18px, 0.22vw + 17.17px, 20px));\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n .level-5 {\n line-height: var(--line-height-heading-relaxed, 1.2);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/\n Heading component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n /\n@Component({\n tag: 'af-heading',\n styleUrl: 'af-heading.css',\n shadow: true\n})\nexport class AfHeading {\n /* Heading level /\n @Prop() level: 'xl' \| '1' \| '2' \| '3' \| '4' \| '5' = '1';\n\n /* Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) /\n @Prop() align: 'inherit' \| 'left' \| 'center' \| 'right' = 'inherit';\n\n private getHeadingTag() {\n // Map display levels to semantic HTML tags\n const tagMap: Record<string, string> = {\n 'xl': 'h1',\n '1': 'h1',\n '2': 'h2',\n '3': 'h3',\n '4': 'h4',\n '5': 'h5'\n };\n return tagMap[this.level] \|\| 'h1';\n }\n\n render() {\n const Tag = this.getHeadingTag() as any;\n\n return (\n <Tag\n class={{\n 'heading': true,\n [`level-${this.level}`]: true,\n [`align-${this.align}`]: true\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.text {\n margin: 0;\n padding: 0;\n font-family: var(--typography-bodyfont, 'NeuSans', Arial, sans-serif);\n font-weight: var(--font-weight-regular, 400);\n / Inherit color from theme context via CSS custom property /\n color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n letter-spacing: var(--letter-spacing-body, 0);\n / Inherit alignment from parent context (e.g. typography lockup), default to left /\n text-align: var(--af-text-align, left);\n}\n\n/ Alignment /\n.align-left {\n text-align: left;\n}\n\n.align-center {\n text-align: center;\n}\n\n.align-right {\n text-align: right;\n}\n\n/ Body variants /\n.variant-xlarge {\n font-size: var(--font-size-body-xlarge, 22px);\n line-height: var(--line-height-body-xlarge, 28px);\n}\n\n.variant-large {\n font-size: var(--font-size-body-large, 18px);\n line-height: var(--line-height-body-large, 26px);\n}\n\n.variant-medium {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n}\n\n.variant-small {\n font-size: var(--font-size-body-small, 14px);\n line-height: var(--line-height-body-small, 20px);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/\n Text/body component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n /\n@Component({\n tag: 'af-text',\n styleUrl: 'af-text.css',\n shadow: true\n})\nexport class AfText {\n /* Text variant /\n @Prop() variant: 'xlarge' \| 'large' \| 'medium' \| 'small' = 'medium';\n\n /* Visual alignment. When not set, inherits from parent context (e.g. typography lockup). /\n @Prop() align?: 'left' \| 'center' \| 'right';\n\n /* Semantic element to render /\n @Prop() as: 'p' \| 'span' \| 'div' \| 'label' = 'p';\n\n render() {\n const Tag = this.as as any;\n\n return (\n <Tag\n class={{\n 'text': true,\n [`variant-${this.variant}`]: true,\n [`align-${this.align}`]: !!this.align\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n",":host {\n display: inline-block;\n}\n\n/ Mobile breakpoint - full width block display /\n:host([breakpoint=\"mobile\"]) {\n display: block;\n width: 100%;\n}\n\n.nav-link {\n text-decoration: none;\n color: inherit;\n display: block;\n}\n\n.nav-item {\n display: flex;\n align-items: center;\n gap: 8px;\n box-sizing: border-box;\n cursor: pointer;\n}\n\n/ Primary hierarchy - bold main navigation /\n.hierarchy-primary {\n padding: 12px;\n justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n gap: 10px;\n}\n\n/ Primary variant 01 - darker /\n.hierarchy-primary.variant-01 {\n font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-size: 16px;\n font-weight: var(--font-weight-book, 500);\n line-height: 20px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/ Add transparent border to prevent layout shift on hover /\n.hierarchy-primary.variant-01 .label-container {\n border-bottom: 1px solid transparent;\n}\n\n/ Primary variant 02 - lighter for light backgrounds /\n.hierarchy-primary.variant-02 {\n font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n font-size: 16px;\n font-weight: var(--font-weight-regular, 400);\n line-height: 20px;\n color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/ Hover state for primary variant-01 - show underline /\n.hierarchy-primary.variant-01:hover .label-container {\n border-bottom-color: currentColor;\n}\n\n/ Active state for primary variant-01 - thicker border /\n.hierarchy-primary.variant-01.active .label-container {\n border-bottom: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n / Adjust margin to prevent shift from 1px to 2px border /\n margin-bottom: -1px;\n}\n\n/ Hover and active states for variant-02 (light backgrounds) - no border /\n.hierarchy-primary.variant-02:hover {\n background-color: rgba(20, 52, 59, 0.04);\n border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n background-color: rgba(20, 52, 59, 0.08);\n border-radius: 8px;\n}\n\n/ Secondary hierarchy - smaller sub-navigation /\n.hierarchy-secondary {\n padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n display: flex;\n align-items: center;\n flex: 1;\n min-height: 24px;\n gap: 10px;\n}\n\n/ Secondary variant 01 - medium weight /\n.hierarchy-secondary.variant-01 {\n font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/ Secondary variant 02 - regular weight /\n.hierarchy-secondary.variant-02 {\n font-family: var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/ Hover state for secondary - underline text /\n.hierarchy-secondary:hover .label-container {\n text-decoration: underline;\n}\n\n/ Focus states for accessibility /\n.nav-item:focus-within {\n outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Remove default focus outline on link /\n.nav-link:focus {\n outline: none;\n}\n\n.nav-link:focus-visible + .nav-item,\n:host(:focus-visible) .nav-item {\n outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Mobile breakpoint styles - explicit via prop /\n.hierarchy-primary.breakpoint-mobile {\n padding: 20px 12px;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n width: 100%;\n justify-content: flex-start;\n}\n\n.hierarchy-primary.breakpoint-mobile .label-container {\n flex: 1;\n justify-content: flex-start;\n}\n\n.hierarchy-primary.variant-01.breakpoint-mobile {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n}\n\n.hierarchy-primary.variant-02.breakpoint-mobile {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n}\n\n/ Mobile breakpoint for secondary hierarchy /\n.hierarchy-secondary.breakpoint-mobile {\n padding: 2px 0;\n height: 40px;\n}\n\n.hierarchy-secondary.breakpoint-mobile .label-container {\n min-height: 24px;\n}\n\n/ Mobile removes the hover underline effect /\n.hierarchy-primary.breakpoint-mobile.variant-01 .label-container {\n border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01:hover .label-container {\n border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01.active .label-container {\n border-bottom-color: transparent;\n margin-bottom: 0;\n}\n\n/ Icon sizing and styling /\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n}\n\n/ Icon color inheritance for primary hierarchy /\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-right\"]) {\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-right\"]) {\n color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/ Icon rotation on active for mobile primary with dropdown indicator.\n Desktop chevrons stay static — rotating on hover/active felt fidgety\n and the open/closed state is already clear from the dropdown panel. /\n.hierarchy-primary.breakpoint-mobile.active ::slotted([slot=\"icon-right\"]) {\n transform: rotate(180deg);\n}\n\n/ Secondary hierarchy - smaller icons /\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n width: 20px;\n height: 20px;\n}\n\n/ Icon color inheritance for secondary hierarchy /\n.hierarchy-secondary.variant-01 ::slotted([slot=\"icon-right\"]) {\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-secondary.variant-02 ::slotted([slot=\"icon-right\"]) {\n color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/ Fallback media query for when breakpoint prop is not set /\n/ ≤ tablet /\n@media (max-width: 1023px) {\n :host([breakpoint=\"auto\"]) .hierarchy-primary,\n :host(:not([breakpoint])) .hierarchy-primary {\n padding: 20px 12px;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n width: 100%;\n }\n\n :host([breakpoint=\"auto\"]) .hierarchy-primary .label-container,\n :host(:not([breakpoint])) .hierarchy-primary .label-container {\n flex: 1;\n justify-content: flex-start;\n }\n\n :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-01,\n :host(:not([breakpoint])) .hierarchy-primary.variant-01 {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n }\n\n :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-02,\n :host(:not([breakpoint])) .hierarchy-primary.variant-02 {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n }\n\n / Icon rotation on active for auto/responsive breakpoint /\n :host([breakpoint=\"auto\"]) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]),\n :host(:not([breakpoint])) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]) {\n transform: rotate(180deg);\n }\n\n / Disable desktop hover rotation in mobile view /\n :host([breakpoint=\"auto\"]) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]),\n :host(:not([breakpoint])) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]) {\n transform: none;\n }\n\n :host([breakpoint=\"auto\"]) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]),\n :host(:not([breakpoint])) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]) {\n transform: rotate(180deg);\n }\n}\n","import { Component, Element, h, Prop, Host } from '@stencil/core';\n\n/\n A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n \n Dropdown trigger a11y: when the host carries a `data-dropdown=\"id\"`\n * attribute and has no `href`, the inner wrapper is promoted to\n * `role=\"button\"` with `tabindex=\"0\"` and keyboard activation (Enter/Space),\n * so keyboard users can open the matching dropdown panel just like a\n * pointer click. The companion `af-navbar` keeps `aria-expanded` on the\n * host in sync with the active dropdown.\n /\n@Component({\n tag: 'af-nav-item',\n styleUrl: 'af-nav-item.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavItem {\n @Element() el!: HTMLElement;\n\n /\n Visual hierarchy level of the navigation item\n * - 'primary': Bold, main navigation (larger text, prominent styling)\n * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n /\n @Prop() hierarchy: 'primary' \| 'secondary' = 'primary';\n\n /\n Visual variant within the hierarchy level\n * - '01': Darker/more prominent styling\n * - '02': Lighter/more subtle styling\n /\n @Prop() variant: '01' \| '02' = '01';\n\n /\n Breakpoint variant for responsive styling\n * - 'desktop': Desktop-specific styles\n * - 'mobile': Mobile-specific styles (larger text, different spacing)\n /\n @Prop({ reflect: true }) breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n URL to navigate to when clicked\n /\n @Prop() href?: string;\n\n /\n Whether this nav item is currently active/selected\n /\n @Prop() active: boolean = false;\n\n /\n Promote Enter and Space on a focused trigger into a synthetic click\n * so the surrounding af-navbar (which listens on click) treats the\n * keyboard activation identically to a pointer click.\n /\n private handleTriggerKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ' \|\| event.key === 'Spacebar') {\n event.preventDefault();\n this.el.click();\n }\n };\n\n render() {\n const classes = {\n 'nav-item': true,\n [`hierarchy-${this.hierarchy}`]: true,\n [`variant-${this.variant}`]: true,\n [`breakpoint-${this.breakpoint}`]: true,\n 'active': this.active,\n };\n\n const innerContent = [\n <slot name=\"icon-left\"></slot>,\n <div class=\"label-container\">\n <slot></slot>\n </div>,\n <slot name=\"icon-right\"></slot>,\n ];\n\n if (this.href) {\n return (\n <Host>\n <a href={this.href} class=\"nav-link\">\n <div class={classes}>{innerContent}</div>\n </a>\n </Host>\n );\n }\n\n const isDropdownTrigger = this.el.hasAttribute('data-dropdown');\n if (isDropdownTrigger) {\n return (\n <Host>\n <div\n class={classes}\n role=\"button\"\n tabindex={0}\n aria-haspopup=\"menu\"\n onKeyDown={this.handleTriggerKeyDown}\n >\n {innerContent}\n </div>\n </Host>\n );\n }\n\n return <Host>{<div class={classes}>{innerContent}</div>}</Host>;\n }\n}\n",":host {\n display: block;\n width: 100%;\n}\n\n/ Spacer element that sits in normal document flow to prevent content overlap /\n.navbar-spacer {\n height: 100px; / Accounts for navbar height + top margin /\n}\n\n/ Theme variants for spacer background - matches section themes /\n.navbar-spacer.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n}\n\n.navbar-spacer.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.navbar-spacer.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.navbar-spacer.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n}\n\n/ Sticky navbar that floats above the spacer /\n.navbar-container {\n position: fixed;\n / Add safe-area-inset-top so the pill drops below the iOS notch / status bar\n when the page uses viewport-fit=cover. Falls back to the original 32px. /\n top: max(32px, env(safe-area-inset-top));\n left: 0;\n right: 0;\n z-index: 10;\n / Horizontal padding honours safe-area-inset-left/right for landscape on\n notched devices; the inset is added on top of the existing 80px gutter. /\n padding: 0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));\n box-sizing: border-box;\n}\n\n.navbar {\n background: var(--colour-background-white, #ffffff);\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 8px 8px 40px;\n box-sizing: border-box;\n flex-wrap: nowrap; / Prevent wrapping /\n}\n\n/ Left section /\n.navbar-left {\n display: flex;\n align-items: center;\n gap: 32px;\n flex-shrink: 0;\n}\n\n.logo {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/ Mobile menu toggle button /\n.mobile-menu-toggle {\n display: none;\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--colour-brand-inkwell, #14343b);\n margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n display: block;\n}\n\n.nav-links {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: nowrap;\n}\n\n/ Right section /\n.navbar-right {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.nav-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.nav-button {\n display: flex;\n align-items: center;\n}\n\n/ Dropdown container. The container's top is raised 8px into what\n was previously a blank gap between the nav pill and the panel, and\n that 8px is absorbed as container top-padding — so the visible panel\n stays put, but the hoverable region is now continuous between the\n nav pill and the dropdown. Without this, the mouse crosses an\n un-hovered strip on its way from trigger to panel and the navbar's\n mouseleave handler fires a close. /\n.dropdown-container {\n position: absolute;\n top: 100px;\n left: 0;\n right: 0;\n padding: 8px 80px 0;\n pointer-events: none;\n opacity: 0;\n transform: translateY(-8px);\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown-container.is-open {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n}\n\n.dropdown-panel {\n background: var(--colour-background-base, #ffffff);\n border-radius: 32px;\n overflow: hidden;\n / shadow-navbar replaces the hand-rolled `0 4px 24px rgba(20, 52, 59, 0.12)`;\n * same value, now sourced from the token ladder so the marketing site can\n * retire its matching bespoke rule. /\n box-shadow: var(--shadow-navbar, 0 4px 24px rgba(20, 52, 59, 0.12));\n}\n\n/ Hide empty dropdown slots /\n.dropdown-panel:empty {\n display: none;\n}\n\n/ Mobile menu panel - separate from navbar for proper positioning /\n.mobile-menu-panel {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--colour-background-base, #ffffff);\n z-index: 9;\n / Full-viewport drawer: pad the top below the notch, the bottom above the\n home indicator, and the sides away from landscape edge cutouts. /\n padding:\n max(100px, calc(100px + env(safe-area-inset-top)))\n calc(16px + env(safe-area-inset-right))\n max(24px, env(safe-area-inset-bottom))\n calc(16px + env(safe-area-inset-left));\n overflow-y: auto;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n.mobile-menu-panel.is-open {\n display: block;\n opacity: 1;\n pointer-events: auto;\n}\n\n/ Mobile CTA button container /\n.mobile-button-container {\n margin-bottom: 8px;\n}\n\n.mobile-button-container ::slotted() {\n width: 100%;\n}\n\n/* Mobile menu content - flex column ensures items stack vertically /\n.mobile-menu-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/ Force slotted items to take full width for composability /\n.mobile-menu-content ::slotted() {\n flex: 0 0 auto;\n width: 100%;\n}\n\n/* \n * Breakpoint 1: Hide \"Talk to us\" and \"Log in\" (nav-actions) \n * This happens first as the viewport gets narrower\n * Matches affinda.com behavior at ~1100px\n /\n@media (max-width: 1099px) {\n .nav-actions {\n display: none;\n }\n \n .navbar-right {\n gap: 0;\n }\n}\n\n/ Tablet adjustments /\n@media (max-width: 1024px) {\n .navbar-spacer {\n height: 88px;\n }\n\n .navbar-container {\n top: max(24px, env(safe-area-inset-top));\n padding: 0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left));\n }\n\n .navbar-left {\n gap: 24px;\n }\n\n .nav-links {\n gap: 4px;\n }\n\n .dropdown-container {\n padding: 0 40px;\n }\n}\n\n/ \n * Breakpoint 2: Switch to hamburger menu\n * Matches affinda.com behavior at 991px\n /\n@media (max-width: 991px) {\n .navbar-spacer {\n height: 72px;\n }\n\n .navbar-container {\n top: max(16px, env(safe-area-inset-top));\n padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));\n z-index: 11; / Above mobile menu panel /\n }\n\n .navbar {\n padding: 8px 8px 8px 24px; / Figma: 8px padding right, 24px left on mobile /\n flex-direction: row;\n border-radius: 9999px; / Keep pill shape on mobile /\n gap: 0;\n }\n\n .navbar-left {\n width: auto;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n gap: 16px;\n flex: 1;\n }\n\n / Show hamburger button on mobile /\n .mobile-menu-toggle {\n display: flex;\n padding: 12px;\n margin-left: auto;\n border-radius: 9999px;\n border: 1px solid var(--colour-brand-inkwell, #14343b);\n }\n\n .mobile-menu-toggle:hover {\n background: rgba(20, 52, 59, 0.05);\n }\n\n / Hide nav links on mobile - they're in the mobile menu panel /\n .nav-links {\n display: none;\n }\n\n / Hide right section on mobile - button is in mobile menu panel /\n .navbar-right {\n display: none;\n }\n\n / Hide desktop dropdown on mobile /\n .dropdown-container {\n display: none;\n }\n\n / Mobile menu panel adjustments /\n .mobile-menu-panel {\n padding-top: max(88px, calc(88px + env(safe-area-inset-top))); / Accounts for navbar height + notch /\n }\n\n .mobile-button-container {\n padding: 0 12px;\n margin-bottom: 8px;\n }\n\n .mobile-button-container ::slotted(af-button),\n .mobile-button-container ::slotted(button) {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n}\n\n/ ==========================================================================\n Force Mobile Mode\n Apply mobile styles regardless of viewport when force-mobile attribute is set\n ========================================================================== /\n\n:host([force-mobile]) .navbar-spacer {\n height: 72px;\n}\n\n:host([force-mobile]) .navbar-container {\n top: max(16px, env(safe-area-inset-top));\n padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));\n z-index: 11;\n}\n\n:host([force-mobile]) .navbar {\n padding: 8px 8px 8px 24px;\n flex-direction: row;\n border-radius: 9999px;\n gap: 0;\n}\n\n:host([force-mobile]) .navbar-left {\n width: auto;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n gap: 16px;\n flex: 1;\n}\n\n:host([force-mobile]) .mobile-menu-toggle {\n display: flex;\n padding: 12px;\n margin-left: auto;\n border-radius: 9999px;\n border: 1px solid var(--colour-brand-inkwell, #14343b);\n}\n\n:host([force-mobile]) .mobile-menu-toggle:hover {\n background: rgba(20, 52, 59, 0.05);\n}\n\n:host([force-mobile]) .nav-links {\n display: none;\n}\n\n:host([force-mobile]) .navbar-right {\n display: none;\n}\n\n:host([force-mobile]) .nav-actions {\n display: none;\n}\n\n:host([force-mobile]) .dropdown-container {\n display: none;\n}\n\n:host([force-mobile]) .mobile-menu-panel {\n padding-top: max(88px, calc(88px + env(safe-area-inset-top)));\n}\n\n:host([force-mobile]) .mobile-menu-panel.is-open {\n display: block;\n opacity: 1;\n pointer-events: auto;\n}\n\n:host([force-mobile]) .mobile-button-container {\n padding: 0 12px;\n margin-bottom: 8px;\n}\n\n:host([force-mobile]) .mobile-button-container ::slotted(af-button),\n:host([force-mobile]) .mobile-button-container ::slotted(button) {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n/ Force mobile: flex column ensures items stack vertically /\n:host([force-mobile]) .mobile-menu-content {\n display: flex;\n flex-direction: column;\n}\n\n/ Force mobile: slotted items take full width for composability /\n:host([force-mobile]) .mobile-menu-content ::slotted() {\n flex: 0 0 auto;\n width: 100%;\n}\n","import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/*\n A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n * \n * Slots:\n * - `logo` - Logo area (defaults to Affinda logo if empty)\n * - `start` - Primary navigation links (left side, desktop)\n * - `end` - Secondary/utility links (right side)\n * - `button` - Call-to-action button\n * - `dropdowns` - One or more dropdown panels, each a `<div data-for=\"id\">`\n * where `id` matches the `data-dropdown=\"id\"` attribute on the trigger.\n * Clicking a trigger toggles the matching panel; only one is visible at\n * a time.\n * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)\n * - `mobile-button` - CTA button for mobile menu (appears at top)\n /\n@Component({\n tag: 'af-navbar',\n styleUrl: 'af-navbar.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavbar {\n @Element() el!: HTMLElement;\n\n @State() mobileMenuOpen: boolean = false;\n \n /* The currently open dropdown identifier (null if none open) /\n @State() activeDropdown: string \| null = null;\n\n /* Whether to show the default Affinda logo when no logo slot content is provided /\n @Prop() showDefaultLogo: boolean = true;\n\n /* Theme for the spacer background - should match the section below the navbar /\n @Prop() theme?: 'white' \| 'inkwell' \| 'mist-green' \| 'soft-clay';\n\n /* Force mobile layout regardless of viewport size (useful for testing/stories) /\n @Prop({ reflect: true }) forceMobile: boolean = false;\n\n private toggleMobileMenu = () => {\n this.mobileMenuOpen = !this.mobileMenuOpen;\n // Close any open dropdown when toggling mobile menu\n this.activeDropdown = null;\n };\n\n /\n Opens a dropdown by its identifier\n /\n private openDropdown = (dropdownId: string) => {\n this.activeDropdown = dropdownId;\n };\n\n /\n Closes the currently open dropdown\n /\n private closeDropdown = () => {\n this.activeDropdown = null;\n };\n\n /\n Toggles a dropdown by its identifier\n /\n private toggleDropdown = (dropdownId: string) => {\n if (this.activeDropdown === dropdownId) {\n this.activeDropdown = null;\n } else {\n this.activeDropdown = dropdownId;\n }\n };\n\n /* Timer id used to debounce hover-driven closes. /\n private closeTimer?: number;\n\n /\n The trigger element that opened the currently active dropdown. Tracked\n * so an Esc keypress can close the dropdown and restore focus to the\n * trigger, matching WAI-ARIA menu-button guidance.\n /\n private lastActiveTrigger?: HTMLElement;\n\n /\n Open the dropdown matching a `[data-dropdown]` trigger on click —\n * acts as a toggle so keyboard/touch users can still dismiss it.\n /\n @Listen('click')\n handleTriggerClick(event: MouseEvent) {\n const target = event.target as HTMLElement \| null;\n const trigger = target?.closest?.('[data-dropdown]') as HTMLElement \| null;\n if (!trigger \|\| !this.el.contains(trigger)) return;\n const id = trigger.getAttribute('data-dropdown');\n if (!id) return;\n event.preventDefault();\n event.stopPropagation();\n this.cancelScheduledClose();\n this.lastActiveTrigger = trigger;\n this.toggleDropdown(id);\n }\n\n /\n Open the dropdown matching a `[data-dropdown]` trigger on hover.\n * Uses mouseover (which bubbles) and checks for the trigger ancestor.\n /\n @Listen('mouseover')\n handleHover(event: MouseEvent) {\n const target = event.target as HTMLElement \| null;\n const trigger = target?.closest?.('[data-dropdown]') as HTMLElement \| null;\n if (!trigger \|\| !this.el.contains(trigger)) return;\n const id = trigger.getAttribute('data-dropdown');\n if (!id \|\| this.activeDropdown === id) {\n this.cancelScheduledClose();\n return;\n }\n this.cancelScheduledClose();\n this.lastActiveTrigger = trigger;\n this.openDropdown(id);\n }\n\n /\n When the pointer leaves the navbar entirely (including any open\n * dropdown panel), schedule a close. Re-entering cancels it.\n /\n @Listen('mouseleave')\n handleHostLeave() {\n this.scheduleClose();\n }\n\n @Listen('mouseenter')\n handleHostEnter() {\n this.cancelScheduledClose();\n }\n\n private scheduleClose() {\n // Short 100ms debounce so the mouse has time to cross any tiny\n // dead-zone between the nav pill, the dropdown panel, and the\n // items inside it without accidentally closing the panel. A\n // re-entering mouseenter on the host cancels the pending close.\n this.cancelScheduledClose();\n this.closeTimer = window.setTimeout(() => {\n this.closeDropdown();\n this.closeTimer = undefined;\n }, 100);\n }\n\n private cancelScheduledClose() {\n if (this.closeTimer !== undefined) {\n clearTimeout(this.closeTimer);\n this.closeTimer = undefined;\n }\n }\n\n /\n Handle clicks outside the navbar to close dropdowns\n /\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdown();\n }\n }\n\n /\n Keep the visibility of slotted dropdown panels, and the `data-active`\n * flag on their triggers, in sync with the currently active dropdown.\n * Each panel lives in the `dropdowns` slot and carries a `data-for`\n * attribute that matches its trigger's id.\n /\n componentDidLoad() {\n this.syncDropdownState();\n }\n\n componentDidUpdate() {\n this.syncDropdownState();\n }\n\n private syncDropdownState() {\n this.el.querySelectorAll<HTMLElement>('[data-for]').forEach((panel) => {\n if (!this.el.contains(panel)) return;\n panel.hidden = panel.getAttribute('data-for') !== this.activeDropdown;\n });\n this.el.querySelectorAll<HTMLElement>('[data-dropdown]').forEach((trigger) => {\n if (!this.el.contains(trigger)) return;\n const active = trigger.getAttribute('data-dropdown') === this.activeDropdown;\n if (active) trigger.setAttribute('data-active', '');\n else trigger.removeAttribute('data-active');\n trigger.setAttribute('aria-expanded', active ? 'true' : 'false');\n });\n }\n\n /\n Handle escape key to close dropdowns. If a dropdown is open, restore\n * focus to the trigger that opened it so keyboard users don't lose\n * their place in the tab order.\n /\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.activeDropdown !== null) {\n const toFocus = this.lastActiveTrigger;\n this.closeDropdown();\n toFocus?.focus?.();\n }\n }\n\n render() {\n const hasDropdown = this.activeDropdown !== null;\n\n return (\n <Host class={{ 'has-dropdown-open': hasDropdown }}>\n {/ Spacer element to prevent content from being hidden behind sticky navbar /}\n <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n \n <nav class=\"navbar-container\">\n <div class=\"navbar theme-white\">\n {/ Left section: Logo + Nav Links /}\n <div class=\"navbar-left\">\n <div class=\"logo\">\n <slot name=\"logo\">\n {/ Default Affinda logo if no slot content provided /}\n {this.showDefaultLogo && <af-logo></af-logo>}\n </slot>\n </div>\n \n {/ Hamburger menu button - mobile only /}\n <button \n class=\"mobile-menu-toggle\"\n onClick={this.toggleMobileMenu}\n aria-label=\"Toggle navigation menu\"\n aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n >\n {this.mobileMenuOpen ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n )}\n </button>\n \n <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n <slot name=\"start\"></slot>\n </div>\n </div>\n\n {/ Right section: Actions + Button /}\n <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n <div class=\"nav-actions\">\n <slot name=\"end\"></slot>\n </div>\n <div class=\"nav-button\">\n <slot name=\"button\"></slot>\n </div>\n </div>\n </div>\n\n {/ Dropdown panel container /}\n <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n <div class=\"dropdown-panel theme-white\">\n <slot name=\"dropdowns\"></slot>\n </div>\n </div>\n </nav>\n\n {/ Mobile menu panel /}\n <div class={`mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}`}>\n {/ Mobile CTA button at top /}\n <div class=\"mobile-button-container\">\n <slot name=\"mobile-button\">\n <slot name=\"button\"></slot>\n </slot>\n </div>\n \n {/ Mobile navigation content /}\n <div class=\"mobile-menu-content\">\n <slot name=\"mobile-menu\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n",":host {\n display: inline-block;\n color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n}\n\n.logo-svg {\n display: block;\n / Maintain aspect ratio based on viewBox (9290:1432 ≈ 6.49:1) /\n width: auto;\n height: 22px;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/\n Affinda logo component\n */\n@Component({\n tag: 'af-logo',\n styleUrl: 'af-logo.css',\n shadow: true\n})\nexport class AfLogo {\n render() {\n return (\n <Host>\n <svg \n class=\"logo-svg\" \n viewBox=\"0 0 9290 1432\" \n aria-label=\"Affinda\"\n role=\"img\"\n >\n <path \n fill=\"currentColor\" \n d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n />\n <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n <path \n fill=\"currentColor\" \n d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n />\n <path \n fill=\"currentColor\" \n d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n />\n <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n </svg>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/af-heading_5.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));letter-spacing:var(--letter-spacing-heading, -0.02em)}.align-inherit{text-align:var(--af-text-align, left)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:var(--font-size-heading-xl-fluid, clamp(50px, 3.31vw + 37.57px, 80px));line-height:var(--line-height-heading-tight, 1)}.level-1{font-size:var(--font-size-heading-1-fluid, clamp(38px, 1.99vw + 30.54px, 56px));line-height:var(--line-height-heading-tight, 1)}.level-2{font-size:var(--font-size-heading-2-fluid, clamp(32px, 1.33vw + 27.03px, 44px));line-height:var(--line-height-heading-tight, 1)}.level-3{font-size:var(--font-size-heading-3-fluid, clamp(25px, 0.99vw + 21.27px, 34px));line-height:var(--line-height-heading-tight, 1)}.level-4{font-size:var(--font-size-heading-4-fluid, clamp(20px, 0.44vw + 18.34px, 24px));line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-4{line-height:var(--line-height-heading-relaxed, 1.2)}}.level-5{font-size:var(--font-size-heading-5-fluid, clamp(18px, 0.22vw + 17.17px, 20px));line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-5{line-height:var(--line-height-heading-relaxed, 1.2)}}";
@@ -121,7 +121,7 @@ const AfNavItem = class {
 };
 AfNavItem.style = afNavItemCss;
-const afNavbarCss = ".sc-af-navbar-h{display:block;width:100%}.navbar-spacer.sc-af-navbar{height:100px}.navbar-spacer.theme-white.sc-af-navbar{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell.sc-af-navbar{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green.sc-af-navbar{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay.sc-af-navbar{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container.sc-af-navbar{position:fixed;top:max(32px, env(safe-area-inset-top));left:0;right:0;z-index:10;padding:0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));box-sizing:border-box}.navbar.sc-af-navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap}.navbar-left.sc-af-navbar{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo.sc-af-navbar{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle.sc-af-navbar{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle.sc-af-navbar svg.sc-af-navbar{display:block}.nav-links.sc-af-navbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right.sc-af-navbar{display:flex;align-items:center;gap:20px}.nav-actions.sc-af-navbar{display:flex;align-items:center;gap:12px}.nav-button.sc-af-navbar{display:flex;align-items:center}.dropdown-container.sc-af-navbar{position:absolute;top:100px;left:0;right:0;padding:8px 80px 0;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease, transform 0.2s ease}.dropdown-container.is-open.sc-af-navbar{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel.sc-af-navbar{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:0 4px 24px rgba(20, 52, 59, 0.12)}.dropdown-panel.sc-af-navbar:empty{display:none}.mobile-menu-panel.sc-af-navbar{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--colour-background-base, #ffffff);z-index:9;padding:max(100px, calc(100px + env(safe-area-inset-top)))\n    calc(16px + env(safe-area-inset-right))\n    max(24px, env(safe-area-inset-bottom))\n    calc(16px + env(safe-area-inset-left));overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}.mobile-button-container.sc-af-navbar{margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>*,.mobile-button-container .sc-af-navbar-s>*{width:100%}.mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column;width:100%}.mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}@media (max-width: 1099px){.nav-actions.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{gap:0}}@media (max-width: 1024px){.navbar-spacer.sc-af-navbar{height:88px}.navbar-container.sc-af-navbar{top:max(24px, env(safe-area-inset-top));padding:0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left))}.navbar-left.sc-af-navbar{gap:24px}.nav-links.sc-af-navbar{gap:4px}.dropdown-container.sc-af-navbar{padding:0 40px}}@media (max-width: 991px){.navbar-spacer.sc-af-navbar{height:72px}.navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}.navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}.navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}.mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}.mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}.nav-links.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{display:none}.dropdown-container.sc-af-navbar{display:none}.mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}.mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}}[force-mobile].sc-af-navbar-h .navbar-spacer.sc-af-navbar{height:72px}[force-mobile].sc-af-navbar-h .navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}[force-mobile].sc-af-navbar-h .navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}[force-mobile].sc-af-navbar-h .navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}[force-mobile].sc-af-navbar-h .nav-links.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .navbar-right.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .nav-actions.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .dropdown-container.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}[force-mobile].sc-af-navbar-h .mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}[force-mobile].sc-af-navbar-h .mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}[force-mobile].sc-af-navbar-h .mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column}.sc-af-navbar-h[force-mobile] .mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}";
+const afNavbarCss = ".sc-af-navbar-h{display:block;width:100%}.navbar-spacer.sc-af-navbar{height:100px}.navbar-spacer.theme-white.sc-af-navbar{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell.sc-af-navbar{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green.sc-af-navbar{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay.sc-af-navbar{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container.sc-af-navbar{position:fixed;top:max(32px, env(safe-area-inset-top));left:0;right:0;z-index:10;padding:0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));box-sizing:border-box}.navbar.sc-af-navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap}.navbar-left.sc-af-navbar{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo.sc-af-navbar{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle.sc-af-navbar{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle.sc-af-navbar svg.sc-af-navbar{display:block}.nav-links.sc-af-navbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right.sc-af-navbar{display:flex;align-items:center;gap:20px}.nav-actions.sc-af-navbar{display:flex;align-items:center;gap:12px}.nav-button.sc-af-navbar{display:flex;align-items:center}.dropdown-container.sc-af-navbar{position:absolute;top:100px;left:0;right:0;padding:8px 80px 0;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease, transform 0.2s ease}.dropdown-container.is-open.sc-af-navbar{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel.sc-af-navbar{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:var(--shadow-navbar, 0 4px 24px rgba(20, 52, 59, 0.12))}.dropdown-panel.sc-af-navbar:empty{display:none}.mobile-menu-panel.sc-af-navbar{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--colour-background-base, #ffffff);z-index:9;padding:max(100px, calc(100px + env(safe-area-inset-top)))\n    calc(16px + env(safe-area-inset-right))\n    max(24px, env(safe-area-inset-bottom))\n    calc(16px + env(safe-area-inset-left));overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}.mobile-button-container.sc-af-navbar{margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>*,.mobile-button-container .sc-af-navbar-s>*{width:100%}.mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column;width:100%}.mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}@media (max-width: 1099px){.nav-actions.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{gap:0}}@media (max-width: 1024px){.navbar-spacer.sc-af-navbar{height:88px}.navbar-container.sc-af-navbar{top:max(24px, env(safe-area-inset-top));padding:0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left))}.navbar-left.sc-af-navbar{gap:24px}.nav-links.sc-af-navbar{gap:4px}.dropdown-container.sc-af-navbar{padding:0 40px}}@media (max-width: 991px){.navbar-spacer.sc-af-navbar{height:72px}.navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}.navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}.navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}.mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}.mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}.nav-links.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{display:none}.dropdown-container.sc-af-navbar{display:none}.mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}.mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}}[force-mobile].sc-af-navbar-h .navbar-spacer.sc-af-navbar{height:72px}[force-mobile].sc-af-navbar-h .navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}[force-mobile].sc-af-navbar-h .navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}[force-mobile].sc-af-navbar-h .navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}[force-mobile].sc-af-navbar-h .nav-links.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .navbar-right.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .nav-actions.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .dropdown-container.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}[force-mobile].sc-af-navbar-h .mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}[force-mobile].sc-af-navbar-h .mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}[force-mobile].sc-af-navbar-h .mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column}.sc-af-navbar-h[force-mobile] .mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}";
 const AfNavbar = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 const afIconBoxCss = ".sc-af-icon-box-h{display:inline-block}.icon-box.sc-af-icon-box{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background-color:var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));color:var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));flex-shrink:0}.icon-box--size-small.sc-af-icon-box{width:48px;height:48px;padding:14px;border-radius:12px}.icon-box--size-default.sc-af-icon-box{width:64px;height:64px;padding:12px;border-radius:16px}.icon-box--size-large.sc-af-icon-box{width:80px;height:80px;padding:16px;border-radius:20px}";

package/dist/cjs/af-icon-button.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 const afIconButtonCss = ":host{display:inline-block}:host([variant=\"secondary\"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant=\"primary\"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant=\"tertiary\"]){color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B))}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0}.size-large{width:72px;height:72px;padding:24px}.size-large .icon{width:24px;height:24px}.size-medium{width:48px;height:48px;padding:12px}.size-medium .icon{width:24px;height:24px}.size-small{width:36px;height:36px;padding:8px}.size-small .icon{width:20px;height:20px}.icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.icon ::slotted(*){width:100%;height:100%;color:inherit}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-tertiary{background:transparent;border-color:transparent;color:var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B))}.variant-tertiary:hover:not(.disabled){opacity:0.8}.variant-tertiary:active:not(.disabled){opacity:0.6}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.icon-button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}button.icon-button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B))}button.icon-button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}button.icon-button.variant-tertiary{background:transparent;border:1px solid transparent}";

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 const afIconTextCss = ".sc-af-icon-text-h{display:block}.icon-text.sc-af-icon-text{display:flex;width:100%}.icon-text--vertical.sc-af-icon-text{flex-direction:column;gap:24px;align-items:flex-start}.icon-text--horizontal.sc-af-icon-text{flex-direction:row;gap:20px;align-items:flex-start}.icon-text__icon.sc-af-icon-text{flex-shrink:0}.icon-text__lockup.sc-af-icon-text{flex:1;min-width:0}@media (max-width: 768px){.icon-text--vertical.sc-af-icon-text{gap:20px}.icon-text--horizontal.sc-af-icon-text{gap:16px}}";

package/dist/cjs/af-icon.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /**

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
-const afIllustratedCardCss = ".sc-af-illustrated-card-h{display:flex;flex-direction:column;width:100%;--af-card-padding:0;--af-card-gap:0}.illustrated-card.sc-af-illustrated-card{min-height:400px}.illustrated-card__content.sc-af-illustrated-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1}.illustrated-card--breakpoint-desktop.illustrated-card--size-default.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 32px 12px 32px}.illustrated-card--breakpoint-desktop.illustrated-card--size-large.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 40px 0 40px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:32px 24px 12px 24px}.illustrated-card__illustration-area.sc-af-illustrated-card{position:relative;width:100%;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.illustrated-card--breakpoint-desktop.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:160px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:192px}.illustrated-card__illustration-placeholder.sc-af-illustrated-card{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center}.illustrated-card__illustration-area.sc-af-illustrated-card-s>img,.illustrated-card__illustration-area .sc-af-illustrated-card-s>img,.illustrated-card__illustration-area.sc-af-illustrated-card img.sc-af-illustrated-card{max-width:100%;max-height:200px;height:auto;object-fit:contain}.illustrated-card.sc-af-illustrated-card af-typography-lockup.sc-af-illustrated-card{--colour-typography-heading-primary:var(--af-typography-heading-primary);--colour-typography-body-default:var(--af-typography-body-default)}";
+const afIllustratedCardCss = ".sc-af-illustrated-card-h{display:flex;flex-direction:column;width:100%;--af-card-padding:0;--af-card-gap:0}.illustrated-card.sc-af-illustrated-card{min-height:400px}.illustrated-card__content.sc-af-illustrated-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1}.illustrated-card--breakpoint-desktop.illustrated-card--size-default.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 32px 12px 32px}.illustrated-card--breakpoint-desktop.illustrated-card--size-large.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 40px 0 40px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:32px 24px 12px 24px}.illustrated-card__illustration-area.sc-af-illustrated-card{position:relative;width:100%;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.illustrated-card--breakpoint-desktop.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:160px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:192px}.illustrated-card__illustration-placeholder.sc-af-illustrated-card{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center}.illustrated-card__illustration-area.sc-af-illustrated-card-s>img,.illustrated-card__illustration-area .sc-af-illustrated-card-s>img,.illustrated-card__illustration-area.sc-af-illustrated-card img.sc-af-illustrated-card{max-width:100%;max-height:200px;height:auto;object-fit:contain;border-radius:var(--radius-lg, 20px)}.illustrated-card.sc-af-illustrated-card af-typography-lockup.sc-af-illustrated-card{--colour-typography-heading-primary:var(--af-typography-heading-primary);--colour-typography-body-default:var(--af-typography-body-default)}";
 const AfIllustratedCard = class {
     constructor(hostRef) {

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 const afImageCss = ".sc-af-image-h{display:block;width:100%}.image-container.sc-af-image{position:relative;overflow:hidden}.image-container--rounded.sc-af-image{border-radius:var(--radius-md, 12px)}.image-container--rounded-left.sc-af-image{border-top-left-radius:var(--radius-md, 12px);border-bottom-left-radius:var(--radius-md, 12px)}.image-container--rounded-right.sc-af-image{border-top-right-radius:var(--radius-md, 12px);border-bottom-right-radius:var(--radius-md, 12px)}.image-container--square.sc-af-image{border-radius:0}.image.sc-af-image{display:block;width:100%;height:auto;object-fit:cover}.image-border.sc-af-image{position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));pointer-events:none;border-radius:inherit}";

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
-const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radii-card-level-1, 32px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:288px;height:288px;max-width:288px;max-height:288px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:38px;padding-bottom:38px;padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:normal}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:normal}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:normal}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:24px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radii-card-level-1-mobile, 24px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";
+const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radius-lg, 20px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:288px;height:288px;max-width:288px;max-height:288px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:38px;padding-bottom:38px;padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:normal}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:normal}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:normal}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:24px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radius-lg, 20px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";
 const AfInPageBanner = class {
     constructor(hostRef) {

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 const afInlineCss = ":host{display:inline-flex;box-sizing:border-box}:host([hidden]){display:none}";