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

@affinda/wc 0.0.28 → 0.2.0

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

Files changed (661) hide show

package/dist/affinda/af-card.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-card.entry.esm.js","sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens /\n\n:host {\n display: block;\n width: 100%;\n}\n\n/ ==========================================================================\n Stretch Mode\n \n When stretch attribute is present, the card fills its container height\n and uses flexbox to distribute space between children. This enables\n equal-height cards in grid/flex layouts.\n ========================================================================== /\n\n:host([stretch]) {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n:host([stretch]) .card {\n flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n flex: 1 1 auto;\n}\n\n/ ==========================================================================\n Base Card Styles\n ========================================================================== /\n\n.card {\n ~~border~~-~~radius:~~ ~~var~~(--border-radius-card-level-1, ~~32px~~);\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n/ ==========================================================================\n Theme Variants\n \n Background colors from Figma tokens:\n - white: #ffffff (Colour/Brand/White)\n - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n - soft-clay: #c0ab8d (Colour/Softclay/400)\n ========================================================================== /\n\n/ WHITE THEME /\n.card.theme-white {\n background-color: var(--colour-brand-white, #ffffff);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/ WHITE-IVORY THEME /\n.card.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/ INKWELL THEME (Dark) /\n.card.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n / Typography - light colors on dark background /\n --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n --af-background-level-1: var(--colour-inkwell-450, #203e45);\n \n / Button variants for dark theme /\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/ MIST-GREEN THEME /\n.card.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/ SOFT-CLAY THEME /\n.card.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/ ==========================================================================\n Card Content\n ========================================================================== /\n\n.card__content {\n position: relative;\n padding: var(--af-card-padding, 40px);\n display: flex;\n flex-direction: column;\n gap: var(--af-card-gap, 24px);\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/ Heading spacing within cards /\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/ Text line-height within cards /\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/\n Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n /\n@Component({\n tag: 'af-card',\n styleUrl: 'af-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfCard {\n /\n Theme - sets background color and provides theme context to children.\n * Defaults to 'mist-green' if not specified.\n /\n @Prop() theme?: ~~'white'~~ ~~\| 'white-ivory' \| 'inkwell' \| 'mist-green' \| 'soft-clay'~~ = 'mist-green';\n\n /\n When true, the card stretches to fill its container height.\n * Use this when the card is in a flex/grid container and needs to\n * participate in equal-height layouts. The card's content will use\n * flexbox to distribute space between children.\n */\n @Prop({ reflect: true }) stretch: boolean = false;\n\n render() {\n const classes = {\n 'card': true,\n [`theme-${this.theme}`]: true\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"card__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,i/~~FAAi~~/F;;~~MCet~~/F,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,~~GAAsE~~,YAAY;~~AAE/F~~;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-card.entry.esm.js","sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens /\n\n:host {\n display: block;\n width: 100%;\n}\n\n/ ==========================================================================\n Stretch Mode\n \n When stretch attribute is present, the card fills its container height\n and uses flexbox to distribute space between children. This enables\n equal-height cards in grid/flex layouts.\n ========================================================================== /\n\n:host([stretch]) {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n:host([stretch]) .card {\n flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n flex: 1 1 auto;\n}\n\n/ ==========================================================================\n Base Card Styles\n ========================================================================== /\n\n.card {\n / radius-lg (20px) is the Affinda card corner — replaces the bespoke\n * `--border-radius-card-level-1` that previously shimmed in at 32px.\n * Consumers can still override by setting `--af-card-radius` on the host. /\n border-radius: var(--af-card-radius, var(--radius-lg, 20px));\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n/ ==========================================================================\n Theme Variants\n \n Background colors from Figma tokens:\n - white: #ffffff (Colour/Brand/White)\n - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n - soft-clay: #c0ab8d (Colour/Softclay/400)\n ========================================================================== /\n\n/ WHITE THEME /\n.card.theme-white {\n background-color: var(--colour-brand-white, #ffffff);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/ WHITE-IVORY THEME /\n.card.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/ INKWELL THEME (Dark) /\n.card.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n / Typography - light colors on dark background /\n --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n --af-background-level-1: var(--colour-inkwell-450, #203e45);\n \n / Button variants for dark theme /\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n \n / Form control tokens (checkbox, radio, switch) /\n --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/ MIST-GREEN THEME /\n.card.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/ SOFT-CLAY THEME /\n.card.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n / Typography /\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/ ==========================================================================\n Card Content\n ========================================================================== /\n\n.card__content {\n position: relative;\n padding: var(--af-card-padding, 40px);\n display: flex;\n flex-direction: column;\n gap: var(--af-card-gap, 24px);\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/ Heading spacing within cards /\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/ Text line-height within cards /\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/\n Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n /\n@Component({\n tag: 'af-card',\n styleUrl: 'af-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfCard {\n /\n Theme - sets background color and provides theme context to children.\n * Defaults to 'mist-green' if not specified.\n /\n @Prop() theme?: Theme = 'mist-green';\n\n /\n When true, the card stretches to fill its container height.\n * Use this when the card is in a flex/grid container and needs to\n * participate in equal-height layouts. The card's content will use\n * flexbox to distribute space between children.\n */\n @Prop({ reflect: true }) stretch: boolean = false;\n\n render() {\n const classes = {\n 'card': true,\n [`theme-${this.theme}`]: true\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"card__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,u/FAAu/F;;MCgB5/F,MAAM,GAAA,MAAA;AANnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}

package/dist/affinda/af-client-carousel.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-client-carousel.entry.esm.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation /\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/ Scroll right animation /\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/ Pause animation on hover /\n:host(:hover) .logo-track {\n animation-play-state: paused;\n}\n\n/ Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. /\n@media (prefers-reduced-motion: reduce) {\n .logo-track,\n .scroll-left .logo-track,\n .scroll-right .logo-track {\n animation: none;\n transform: translateX(0);\n }\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/ Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. /\n.logo-track > {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== /\n\n/ INKWELL THEME (Default) /\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/ WHITE THEME /\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ MIST-GREEN THEME /\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ SOFT-CLAY THEME /\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ WHITE-IVORY THEME /\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ ==========================================================================\n Responsive Adjustments\n ========================================================================== /\n\n/ Tablet adjustments /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/ Mobile adjustments /\n/ ≤ mobile /\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted() {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' \| 'inkwell' \| 'mist-green' \| 'soft-clay' \| 'white-ivory';\n\n/*\n Infinite scrolling carousel for client logos.\n \n This is a section-level component that spans full width.\n * Renders one or two scrolling rows; single row matches the Webflow\n * reference, two rows (scrolling opposite directions) is the denser\n * variant.\n \n For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n \n Seamless loop: the CSS animation translates the track from 0% to\n * -50% (or vice versa), which only looks continuous if the track holds\n * two identical copies of the content end-to-end. Shadow DOM slots can\n * only project content once, so we clone the slotted nodes in\n * `componentDidLoad` and append the copies to the track.\n /\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n // Scoped (not shadow) so that cloned nodes inherit the consumer's\n // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n // carousel). Shadow DOM would seal the clones off from outer styles.\n shadow: false,\n scoped: true,\n})\nexport class AfClientCarousel {\n @Element() el!: HTMLElement;\n\n /* Theme - sets background color and provides theme context to children /\n @Prop() theme: Theme = 'inkwell';\n\n /\n Number of scrolling rows.\n * - `1` (default) — single row scrolling left, matches the Webflow reference.\n * - `2` — two rows scrolling in opposite directions.\n \n When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n /\n @Prop() rows: 1 \| 2 = 1;\n\n private row1TrackRef?: HTMLElement;\n private row2TrackRef?: HTMLElement;\n\n componentDidLoad() {\n this.duplicateTrackContent(this.row1TrackRef);\n if (Number(this.rows) === 2) {\n this.duplicateTrackContent(this.row2TrackRef);\n }\n }\n\n /\n Append clones of every existing track child into the track so the\n * -50% translate animation loops seamlessly. Marks clones with\n * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n * them and we can skip them when re-duplicating.\n \n In scoped mode, slotted content is moved into the track as regular\n * children (there's no `<slot>` element to read from), so we just\n * iterate direct children that aren't themselves prior clones.\n */\n private duplicateTrackContent(track: HTMLElement \| undefined) {\n if (!track) return;\n const originals = Array.from(track.children).filter(\n (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n );\n originals.forEach((el) => {\n const clone = el.cloneNode(true) as HTMLElement;\n clone.setAttribute('data-carousel-clone', '');\n clone.setAttribute('aria-hidden', 'true');\n track.appendChild(clone);\n });\n }\n\n render() {\n const rows = Number(this.rows);\n return (\n <Host class={`theme-${this.theme}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,yuGAAyuG;;MC8BxvG,gBAAgB,GAAA,MAAA;AAT7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAaU,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;;;;;;AAOG;AACK,QAAA,IAAI,CAAA,IAAA,GAAU,CAAC;AA6DxB;IAxDC,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,CAAC;QAC7C,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC3B,YAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,CAAC;;;AAIjD;;;;;;;;;AASG;AACK,IAAA,qBAAqB,CAAC,KAA8B,EAAA;AAC1D,QAAA,IAAI,CAAC,KAAK;YAAE;QACZ,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CACjD,CAAC,KAAK,KAAK,CAAE,KAAqB,CAAC,YAAY,CAAC,qBAAqB,CAAC,CACvE;AACD,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;YACvB,MAAM,KAAK,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAgB;AAC/C,YAAA,KAAK,CAAC,YAAY,CAAC,qBAAqB,EAAE,EAAE,CAAC;AAC7C,YAAA,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACzC,YAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;AAC1B,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,EAAE,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,sBAAA,EAAyB,IAAI,CAAC,KAAK,SAAS,IAAI,CAAA,CAAE,EAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,EAC3D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH,CACF,EAEL,IAAI,KAAK,CAAC,KACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,EAC3D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACP,CACG,CACF,CACD;;;;;;;;"}
1	+ {"version":3,"file":"af-client-carousel.entry.esm.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation /\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/ Scroll right animation /\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/ Pause animation on hover /\n:host(:hover) .logo-track {\n animation-play-state: paused;\n}\n\n/ Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. /\n@media (prefers-reduced-motion: reduce) {\n .logo-track,\n .scroll-left .logo-track,\n .scroll-right .logo-track {\n animation: none;\n transform: translateX(0);\n }\n}\n\n/ ==========================================================================\n Static Mode\n ==========================================================================\n Non-animated, centred row. Used when the logo set is small enough to\n fit on screen without scrolling (the former website LogoPillRow use\n case). The clone-for-seamless-loop is skipped in TSX, so each logo\n appears exactly once here. /\n.client-carousel.mode-static .logo-track {\n animation: none;\n / The track is what we centre — the .carousel-row is full-width so\n * it can host the overflow cue in scroll mode; in static mode we\n * centre its child track instead of fighting the row's flex default. /\n justify-content: center;\n / Let the track grow only as wide as its content so justify-content\n * on the parent row can actually centre it horizontally. /\n flex-wrap: wrap;\n width: 100%;\n}\n\n.client-carousel.mode-static .carousel-row {\n justify-content: center;\n / Static rows have no scrolling motion to mask, so allow the row to\n * expand content-naturally instead of clipping at viewport edges. /\n overflow: visible;\n}\n\n.client-carousel.mode-static .carousel-container {\n / Match the row's no-clip behaviour so wrapped logos stay visible. /\n overflow: visible;\n}\n\n.client-carousel.mode-static {\n / Keep horizontal bleed contained for consistency with scroll mode. /\n overflow: hidden;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/ Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. /\n.logo-track > {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== /\n\n/ INKWELL THEME (Default) /\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/ WHITE THEME /\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ MIST-GREEN THEME /\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ SOFT-CLAY THEME /\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ WHITE-IVORY THEME /\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ ==========================================================================\n Responsive Adjustments\n ========================================================================== /\n\n/ Tablet adjustments /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/ Mobile adjustments /\n/ ≤ mobile /\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted() {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\ntype Mode = 'scroll' \| 'static';\n\n/*\n Full-width row of client logos, either infinite-scrolling (default)\n * or a centred static row.\n \n This is a section-level component that spans full width.\n * Renders one or two rows; single row matches the Webflow reference,\n * two rows is the denser variant. When `mode=\"scroll\"` (default) rows\n * animate in opposite directions; when `mode=\"static\"` rows are centred\n * and the animation is disabled.\n \n For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n \n Seamless loop (scroll mode only): the CSS animation translates\n * the track from 0% to -50% (or vice versa), which only looks continuous\n * if the track holds two identical copies of the content end-to-end.\n * Shadow DOM slots can only project content once, so we clone the\n * slotted nodes in `componentDidLoad` and append the copies to the track.\n * Static mode skips the clone — nothing is animating, so duplicating\n * the logos would just render them twice.\n /\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n // Scoped (not shadow) so that cloned nodes inherit the consumer's\n // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n // carousel). Shadow DOM would seal the clones off from outer styles.\n shadow: false,\n scoped: true,\n})\nexport class AfClientCarousel {\n @Element() el!: HTMLElement;\n\n /* Theme - sets background color and provides theme context to children /\n @Prop() theme: Theme = 'inkwell';\n\n /\n Number of rows.\n * - `1` (default) — single row, matches the Webflow reference.\n * - `2` — two rows (scroll in opposite directions, or stacked when static).\n \n When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n /\n @Prop() rows: 1 \| 2 = 1;\n\n /\n Layout mode.\n * - `scroll` (default) — infinite animated scroll; rows fill the full\n * width and are cloned for a seamless loop.\n * - `static` — no animation, logos centred horizontally. Use when the\n * logo set is small enough to fit on screen without scrolling.\n /\n @Prop() mode: Mode = 'scroll';\n\n private row1TrackRef?: HTMLElement;\n private row2TrackRef?: HTMLElement;\n\n componentDidLoad() {\n // Static mode doesn't animate, so the clone trick isn't needed —\n // skipping it avoids rendering every logo twice.\n if (this.mode === 'static') return;\n this.duplicateTrackContent(this.row1TrackRef);\n if (Number(this.rows) === 2) {\n this.duplicateTrackContent(this.row2TrackRef);\n }\n }\n\n /\n Append clones of every existing track child into the track so the\n * -50% translate animation loops seamlessly. Marks clones with\n * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n * them and we can skip them when re-duplicating.\n \n In scoped mode, slotted content is moved into the track as regular\n * children (there's no `<slot>` element to read from), so we just\n * iterate direct children that aren't themselves prior clones.\n */\n private duplicateTrackContent(track: HTMLElement \| undefined) {\n if (!track) return;\n const originals = Array.from(track.children).filter(\n (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n );\n originals.forEach((el) => {\n const clone = el.cloneNode(true) as HTMLElement;\n clone.setAttribute('data-carousel-clone', '');\n clone.setAttribute('aria-hidden', 'true');\n track.appendChild(clone);\n });\n }\n\n render() {\n const rows = Number(this.rows);\n // Direction classes are left on in static mode too — the `.mode-static`\n // CSS rule overrides `animation` to `none`, so the direction is a no-op\n // visually but keeps the markup shape consistent across modes.\n return (\n <Host class={`theme-${this.theme} mode-${this.mode}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/affinda/af-divider.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-divider.entry.esm.js","sources":["src/components/af-divider/af-divider.css?tag=af-divider&encapsulation=shadow","src/components/af-divider/af-divider.tsx"],"sourcesContent":[":host {\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(.divider--horizontal) {\n display: block;\n width: 100%;\n height: 1px;\n background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n}\n\n:host(.divider--vertical) {\n display: inline-block;\n width: 1px;\n height: 100%;\n min-height: 1em;\n background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n align-self: stretch;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Orientation = 'horizontal' \| 'vertical';\ntype Spacing = ~~'none'~~ \| '1' ~~\| '2' \| '3' \| '4' \| '5' \| '6' \| '8'~~;\n\n/*\n Divider component for visual separation between content.\n * Supports horizontal and vertical orientations with theme-aware styling.\n /\n@Component({\n tag: 'af-divider',\n styleUrl: 'af-divider.css',\n shadow: true,\n})\nexport class AfDivider {\n /\n Orientation of the divider.\n /\n @Prop() orientation: Orientation = 'horizontal';\n\n /\n Spacing (margin) around the divider using space tokens.\n * For horizontal: margin-top and margin-bottom\n * For vertical: margin-left and margin-right\n */\n @Prop() spacing: Spacing = '4';\n\n render() {\n const isVertical = this.orientation === 'vertical';\n const spacingValue = this.spacing === 'none' ? '0' : `var(--space-${this.spacing})`;\n\n const style: Record<string, string> = isVertical\n ? {\n marginLeft: spacingValue,\n marginRight: spacingValue,\n }\n : {\n marginTop: spacingValue,\n marginBottom: spacingValue,\n };\n\n return (\n <Host\n class={{\n 'divider': true,\n 'divider--horizontal': !isVertical,\n 'divider--vertical': isVertical,\n }}\n style={style}\n role=\"separator\"\n aria-orientation={this.orientation}\n ></Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,oWAAoW;;~~MCc5W~~,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAgB,YAAY;AAE/C;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,GAAG;AA6B/B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,KAAK,UAAU;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG,CAAA,YAAA,EAAe,IAAI,CAAC,OAAO,GAAG;QAEnF,MAAM,KAAK,GAA2B;AACpC,cAAE;AACE,gBAAA,UAAU,EAAE,YAAY;AACxB,gBAAA,WAAW,EAAE,YAAY;AAC1B;AACH,cAAE;AACE,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,YAAY,EAAE,YAAY;aAC3B;QAEL,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;gBACf,qBAAqB,EAAE,CAAC,UAAU;AAClC,gBAAA,mBAAmB,EAAE,UAAU;AAChC,aAAA,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,IAAI,CAAC,WAAW,EAAA,CAC5B;;;;;;;"}
1	+ {"version":3,"file":"af-divider.entry.esm.js","sources":["src/components/af-divider/af-divider.css?tag=af-divider&encapsulation=shadow","src/components/af-divider/af-divider.tsx"],"sourcesContent":[":host {\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(.divider--horizontal) {\n display: block;\n width: 100%;\n height: 1px;\n background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n}\n\n:host(.divider--vertical) {\n display: inline-block;\n width: 1px;\n height: 100%;\n min-height: 1em;\n background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n align-self: stretch;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Gap } from '../../types';\n\ntype Orientation = 'horizontal' \| 'vertical';\ntype Spacing = Gap \| 'none';\n\n/*\n Divider component for visual separation between content.\n * Supports horizontal and vertical orientations with theme-aware styling.\n /\n@Component({\n tag: 'af-divider',\n styleUrl: 'af-divider.css',\n shadow: true,\n})\nexport class AfDivider {\n /\n Orientation of the divider.\n /\n @Prop() orientation: Orientation = 'horizontal';\n\n /\n Spacing (margin) around the divider using space tokens.\n * For horizontal: margin-top and margin-bottom\n * For vertical: margin-left and margin-right\n */\n @Prop() spacing: Spacing = '4';\n\n render() {\n const isVertical = this.orientation === 'vertical';\n const spacingValue = this.spacing === 'none' ? '0' : `var(--space-${this.spacing})`;\n\n const style: Record<string, string> = isVertical\n ? {\n marginLeft: spacingValue,\n marginRight: spacingValue,\n }\n : {\n marginTop: spacingValue,\n marginBottom: spacingValue,\n };\n\n return (\n <Host\n class={{\n 'divider': true,\n 'divider--horizontal': !isVertical,\n 'divider--vertical': isVertical,\n }}\n style={style}\n role=\"separator\"\n aria-orientation={this.orientation}\n ></Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,oWAAoW;;MCe5W,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAgB,YAAY;AAE/C;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,GAAG;AA6B/B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,KAAK,UAAU;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG,CAAA,YAAA,EAAe,IAAI,CAAC,OAAO,GAAG;QAEnF,MAAM,KAAK,GAA2B;AACpC,cAAE;AACE,gBAAA,UAAU,EAAE,YAAY;AACxB,gBAAA,WAAW,EAAE,YAAY;AAC1B;AACH,cAAE;AACE,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,YAAY,EAAE,YAAY;aAC3B;QAEL,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;gBACf,qBAAqB,EAAE,CAAC,UAAU;AAClC,gBAAA,mBAAmB,EAAE,UAAU;AAChC,aAAA,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,IAAI,CAAC,WAAW,EAAA,CAC5B;;;;;;;"}

package/dist/affinda/af-feature-accordion.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-feature-accordion.entry.esm.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n /* Inherits theme from parent Section via CSS custom properties /\n padding: 0 24px;\n \n / Internal custom properties that inherit from parent Section's theme /\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n --_level-1-bg: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/ Accordion List /\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/ Accordion Item /\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/ Collapsed items have lighter text /\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/ Timer track - the progress bar at the bottom of expanded items /\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--colour-brand-ice, #a6fffb);\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/ Image Container - stretches full height to align with accordion /\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--_level-1-bg);\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: 32px;\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ Tablet /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/ Mobile /\n/ mobile-only /\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/\n Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * Must be wrapped in a Section component to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n /\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /* Section heading /\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /* JSON string of accordion items /\n @Prop() items: string = '[]';\n\n /* Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) /\n @Prop() cycleInterval: number = 6000;\n\n /* Whether auto-cycling is enabled /\n @Prop() autoCycle: boolean = true;\n\n /* Currently expanded item index /\n @State() expandedIndex: number = 0;\n\n /* Progress of current timer (0-100) /\n @State() timerProgress: number = 100;\n\n private progressTimer: number \| null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion /}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button \n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n <span class=\"accordion-item__icon\">\n {this.expandedIndex === index ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n )}\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/ Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt \|\| currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"af-feature-accordion.entry.esm.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/\n af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n \n --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n \n The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n \n --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n /\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n / Inherits theme from parent Section via CSS custom properties /\n padding: 0 24px;\n\n / Internal custom properties that inherit from parent Section's theme /\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/ Accordion List /\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/ Accordion Item /\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/ Collapsed items have lighter text /\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/ Timer track - the progress bar at the bottom of expanded items /\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/ Image Container - stretches full height to align with accordion /\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n / Flows from parent Section's theme; mist-green fallback for unthemed use /\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ Tablet /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/ Mobile /\n/ mobile-only /\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/\n Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * Must be wrapped in a Section component to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n /\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /* Section heading /\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /* JSON string of accordion items /\n @Prop() items: string = '[]';\n\n /* Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) /\n @Prop() cycleInterval: number = 6000;\n\n /* Whether auto-cycling is enabled /\n @Prop() autoCycle: boolean = true;\n\n /* Currently expanded item index /\n @State() expandedIndex: number = 0;\n\n /* Progress of current timer (0-100) /\n @State() timerProgress: number = 100;\n\n private progressTimer: number \| null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion /}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button \n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n <span class=\"accordion-item__icon\">\n {this.expandedIndex === index ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n )}\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/ Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt \|\| currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/affinda/af-feature-card.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-feature-card.entry.esm.js","sources":["src/components/af-feature-card/af-feature-card.css?tag=af-feature-card&encapsulation=scoped","src/components/af-feature-card/af-feature-card.tsx"],"sourcesContent":["/* ==========================================================================\n Feature Card - Figma Specs\n \n Desktop Full-bleed: 544px × 660px, radius 32px\n Desktop Standard default: 544px width, radius 32px\n Desktop Standard large: 777px width, radius 32px\n Mobile Full-bleed: 335px × 442px, radius 24px\n Mobile Standard: 335px width, radius 24px\n ========================================================================== /\n\n/ ==========================================================================\n Host Element - Controls outer dimensions\n ========================================================================== /\n\n:host {\n display: block;\n --af-card-padding: 0;\n --af-card-gap: 0;\n}\n\n/ Fixed size hosts constrain to Figma dimensions /\n:host([card-size=\"default\"]) {\n width: 544px;\n}\n\n:host([card-size=\"large\"]) {\n width: 777px;\n}\n\n/ Flexible cards fill their container /\n:host([card-size=\"flexible\"]) {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n/ ==========================================================================\n Base Feature Card Styles\n ========================================================================== /\n\n.feature-card {\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: var(--border-radius-card-level-1, 32px);\n width: 100%;\n height: 100%;\n / Ensure proper clipping of absolutely positioned children with border-radius /\n isolation: isolate;\n}\n\n/ ==========================================================================\n Full Bleed Layout Mode\n Figma: 544px × 660px (desktop), 335px × 442px (mobile)\n ========================================================================== /\n\n.feature-card--layout-full-bleed {\n background: var(--background-base, var(--colour-brand-inkwell, #14343b));\n}\n\n/ Full-bleed fixed sizes have explicit heights on host /\n:host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n:host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n height: 660px;\n}\n\n/ Full-bleed flexible minimum height /\n:host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n min-height: 480px;\n}\n\n.feature-card__background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n border-radius: 0;\n}\n\n.feature-card__background-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n border-radius: 0;\n}\n\n/ Overlay gradient with text /\n.feature-card__overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 0;\n backdrop-filter: blur(2px);\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n z-index: 1;\n / Desktop: pt-124px px-32px pb-32px /\n padding: 124px 32px 32px 32px;\n\n / White text on dark overlay /\n --af-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n --af-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n --af-typography-body-default: var(--typography-body-dark, #ffffff);\n --colour-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n --colour-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n --colour-typography-body-default: var(--typography-body-dark, #ffffff);\n}\n\n/ ==========================================================================\n Standard Layout Mode\n \n Structure: .feature-card > af-card[stretch] > [content] + [image-area]\n \n When cardSize=\"flexible\", af-card receives stretch prop which enables\n the flex chain. Content grows to fill space, image stays at bottom.\n ========================================================================== /\n\n.feature-card--layout-standard {\n background: var(--background-level-1, var(--colour-mistgreen-200, #e8eeed));\n}\n\n/ Remove border-radius from inner af-card - outer .feature-card handles rounding /\n.feature-card--layout-standard af-card {\n --border-radius-card-level-1: 0;\n}\n\n/ Standard flexible minimum height /\n:host([card-size=\"flexible\"]) .feature-card--layout-standard {\n min-height: 400px;\n}\n\n/ Content area - grows to push image to bottom (when af-card has stretch) /\n.feature-card__content {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n z-index: 1;\n / Desktop default: pt-40px px-32px pb-12px /\n padding: 40px 32px 12px 32px;\n flex: 1 1 auto;\n}\n\n/ Large card content padding: pt-40px px-40px pb-0 /\n:host([card-size=\"large\"]) .feature-card__content {\n padding: 40px 40px 0 40px;\n}\n\n/ ==========================================================================\n Image Area (Standard Layout)\n Figma: 160px height (desktop), 192px height (mobile)\n ========================================================================== /\n\n.feature-card__image-area {\n position: relative;\n width: 100%;\n height: 160px;\n flex-shrink: 0;\n overflow: hidden;\n border-radius: 0;\n}\n\n.feature-card__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center top;\n border-radius: 0;\n}\n\n/ ==========================================================================\n Typography Lockup Styling\n ========================================================================== /\n\n.feature-card af-typography-lockup {\n --colour-typography-heading-primary: var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));\n --colour-typography-body-default: var(--af-typography-body-default, var(--typography-body-default, #2b484f));\n}\n\n/ ==========================================================================\n Mobile Responsive Styles (max-width: 768px)\n \n Figma:\n - Full-bleed: 335px × 442px, radius 24px\n - Standard: 335px width, radius 24px\n ========================================================================== /\n\n/ mobile-only /\n@media (max-width: 768px) {\n .feature-card {\n border-radius: var(--border-radius-card-level-1, 24px);\n }\n\n / Mobile fixed widths on host /\n :host([card-size=\"default\"]),\n :host([card-size=\"large\"]) {\n width: 335px;\n }\n\n / Mobile full-bleed height: 442px /\n :host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n :host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n height: 442px;\n }\n\n / Mobile flexible minimum heights /\n :host([card-size=\"flexible\"]) .feature-card--layout-standard {\n min-height: 340px;\n }\n\n :host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n min-height: 380px;\n }\n\n / Mobile overlay padding: pt-80px px-24px pb-28px /\n .feature-card__overlay {\n padding: 80px 24px 28px 24px;\n }\n\n / Mobile content padding: pt-32px px-24px pb-12px /\n .feature-card__content {\n padding: 32px 24px 12px 24px;\n }\n\n / Mobile image area: 192px height /\n .feature-card__image-area {\n height: 192px;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/\n Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\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 /\n@Component({\n tag: 'af-feature-card',\n styleUrl: 'af-feature-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureCard {\n /\n Theme variant - sets background color and provides theme context.\n * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n /\n @Prop() theme?: 'white' \| 'white-ivory' \| 'inkwell' \| 'mist-green' \| 'soft-clay' = 'mist-green';\n\n /\n Layout mode for the card.\n * - 'standard': Theme background with text at top and image at bottom\n * - 'full-bleed': Image covers entire card with text overlay at bottom\n /\n @Prop() layout: 'standard' \| 'full-bleed' = 'standard';\n\n /\n Card size variant.\n * - 'default': Fixed 544px × 420px\n * - 'large': Fixed 777px × 480px \n * - 'flexible': Fills container (for grid layouts)\n /\n @Prop({ reflect: true }) cardSize: 'default' \| 'large' \| 'flexible' = 'default';\n\n /\n Heading size for typography lockup (1-5, where 1 is largest).\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 = 3;\n\n /\n Background/feature image URL.\n /\n @Prop() imageSrc?: string;\n\n /\n Image alt text for accessibility.\n * Provide meaningful alt text for feature images.\n * Only use empty string for purely decorative images.\n /\n @Prop() imageAlt: string = '';\n\n render() {\n const hasImage = !!this.imageSrc;\n const isFullBleed = this.layout === 'full-bleed';\n\n const wrapperClasses = {\n 'feature-card': true,\n [`feature-card--layout-${this.layout}`]: true,\n [`feature-card--size-${this.cardSize}`]: true,\n };\n\n // Full-bleed mode: image background with overlay\n if (isFullBleed) {\n return (\n <Host>\n <div class={wrapperClasses}>\n {/ Background image /}\n {hasImage && (\n <div class=\"feature-card__background\">\n <img\n src={this.imageSrc}\n alt={this.imageAlt}\n class=\"feature-card__background-image\"\n />\n </div>\n )}\n\n {/ Content overlay with gradient /}\n <div class=\"feature-card__overlay\">\n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n </div>\n </Host>\n );\n }\n\n // Standard mode: theme card with image at bottom\n const isFlexible = this.cardSize === 'flexible';\n \n return (\n <Host>\n <div class={wrapperClasses}>\n <af-card theme={this.theme} stretch={isFlexible}>\n {/ Content area with typography lockup /}\n <div class=\"feature-card__content\">\n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n\n {/ Image area at bottom */}\n {hasImage && (\n <div class=\"feature-card__image-area\">\n <img\n src={this.imageSrc}\n alt={this.imageAlt}\n class=\"feature-card__image\"\n />\n </div>\n )}\n </af-card>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"af-feature-card.entry.esm.js","sources":["src/components/af-feature-card/af-feature-card.css?tag=af-feature-card&encapsulation=scoped","src/components/af-feature-card/af-feature-card.tsx"],"sourcesContent":["/* ==========================================================================\n Feature Card - Figma Specs\n \n Desktop Full-bleed: 544px × 660px, radius 32px\n Desktop Standard default: 544px width, radius 32px\n Desktop Standard large: 777px width, radius 32px\n Mobile Full-bleed: 335px × 442px, radius 24px\n Mobile Standard: 335px width, radius 24px\n ========================================================================== /\n\n/ ==========================================================================\n Host Element - Controls outer dimensions\n ========================================================================== /\n\n:host {\n display: block;\n --af-card-padding: 0;\n --af-card-gap: 0;\n}\n\n/ Fixed size hosts constrain to Figma dimensions /\n:host([card-size=\"default\"]) {\n width: 544px;\n}\n\n:host([card-size=\"large\"]) {\n width: 777px;\n}\n\n/ Flexible cards fill their container /\n:host([card-size=\"flexible\"]) {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n/ ==========================================================================\n Base Feature Card Styles\n ========================================================================== /\n\n.feature-card {\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: var(--border-radius-card-level-1, 32px);\n width: 100%;\n height: 100%;\n / Ensure proper clipping of absolutely positioned children with border-radius /\n isolation: isolate;\n}\n\n/ ==========================================================================\n Full Bleed Layout Mode\n Figma: 544px × 660px (desktop), 335px × 442px (mobile)\n ========================================================================== /\n\n.feature-card--layout-full-bleed {\n background: var(--background-base, var(--colour-brand-inkwell, #14343b));\n}\n\n/ Full-bleed fixed sizes have explicit heights on host /\n:host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n:host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n height: 660px;\n}\n\n/ Full-bleed flexible minimum height /\n:host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n min-height: 480px;\n}\n\n.feature-card__background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n border-radius: 0;\n}\n\n.feature-card__background-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n border-radius: 0;\n}\n\n/ Overlay gradient with text /\n.feature-card__overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 0;\n backdrop-filter: blur(2px);\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n z-index: 1;\n / Desktop: pt-124px px-32px pb-32px /\n padding: 124px 32px 32px 32px;\n\n / White text on dark overlay /\n --af-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n --af-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n --af-typography-body-default: var(--typography-body-dark, #ffffff);\n --colour-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n --colour-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n --colour-typography-body-default: var(--typography-body-dark, #ffffff);\n}\n\n/ ==========================================================================\n Standard Layout Mode\n \n Structure: .feature-card > af-card[stretch] > [content] + [image-area]\n \n When cardSize=\"flexible\", af-card receives stretch prop which enables\n the flex chain. Content grows to fill space, image stays at bottom.\n ========================================================================== /\n\n.feature-card--layout-standard {\n background: var(--background-level-1, var(--colour-mistgreen-200, #e8eeed));\n}\n\n/ Remove border-radius from inner af-card - outer .feature-card handles rounding /\n.feature-card--layout-standard af-card {\n --border-radius-card-level-1: 0;\n}\n\n/ Standard flexible minimum height /\n:host([card-size=\"flexible\"]) .feature-card--layout-standard {\n min-height: 400px;\n}\n\n/ Content area - grows to push image to bottom (when af-card has stretch) /\n.feature-card__content {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n z-index: 1;\n / Desktop default: pt-40px px-32px pb-12px /\n padding: 40px 32px 12px 32px;\n flex: 1 1 auto;\n}\n\n/ Large card content padding: pt-40px px-40px pb-0 /\n:host([card-size=\"large\"]) .feature-card__content {\n padding: 40px 40px 0 40px;\n}\n\n/ ==========================================================================\n Image Area (Standard Layout)\n Figma: 160px height (desktop), 192px height (mobile)\n ========================================================================== /\n\n.feature-card__image-area {\n position: relative;\n width: 100%;\n height: 160px;\n flex-shrink: 0;\n overflow: hidden;\n border-radius: 0;\n}\n\n.feature-card__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center top;\n border-radius: 0;\n}\n\n/ ==========================================================================\n Typography Lockup Styling\n ========================================================================== /\n\n.feature-card af-typography-lockup {\n --colour-typography-heading-primary: var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));\n --colour-typography-body-default: var(--af-typography-body-default, var(--typography-body-default, #2b484f));\n}\n\n/ ==========================================================================\n Mobile Responsive Styles (max-width: 768px)\n \n Figma:\n - Full-bleed: 335px × 442px, radius 24px\n - Standard: 335px width, radius 24px\n ========================================================================== /\n\n/ mobile-only /\n@media (max-width: 768px) {\n .feature-card {\n border-radius: var(--border-radius-card-level-1, 24px);\n }\n\n / Mobile fixed widths on host /\n :host([card-size=\"default\"]),\n :host([card-size=\"large\"]) {\n width: 335px;\n }\n\n / Mobile full-bleed height: 442px /\n :host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n :host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n height: 442px;\n }\n\n / Mobile flexible minimum heights /\n :host([card-size=\"flexible\"]) .feature-card--layout-standard {\n min-height: 340px;\n }\n\n :host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n min-height: 380px;\n }\n\n / Mobile overlay padding: pt-80px px-24px pb-28px /\n .feature-card__overlay {\n padding: 80px 24px 28px 24px;\n }\n\n / Mobile content padding: pt-32px px-24px pb-12px /\n .feature-card__content {\n padding: 32px 24px 12px 24px;\n }\n\n / Mobile image area: 192px height /\n .feature-card__image-area {\n height: 192px;\n }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/\n Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\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 /\n@Component({\n tag: 'af-feature-card',\n styleUrl: 'af-feature-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureCard {\n /\n Theme variant - sets background color and provides theme context.\n * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n /\n @Prop() theme?: Theme = 'mist-green';\n\n /\n Layout mode for the card.\n * - 'standard': Theme background with text at top and image at bottom\n * - 'full-bleed': Image covers entire card with text overlay at bottom\n /\n @Prop() layout: 'standard' \| 'full-bleed' = 'standard';\n\n /\n Card size variant.\n * - 'default': Fixed 544px × 420px\n * - 'large': Fixed 777px × 480px \n * - 'flexible': Fills container (for grid layouts)\n /\n @Prop({ reflect: true }) cardSize: 'default' \| 'large' \| 'flexible' = 'default';\n\n /\n Heading size for typography lockup (1-5, where 1 is largest).\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 = 3;\n\n /\n Background/feature image URL.\n /\n @Prop() imageSrc?: string;\n\n /\n Image alt text for accessibility.\n * Provide meaningful alt text for feature images.\n * Only use empty string for purely decorative images.\n /\n @Prop() imageAlt: string = '';\n\n render() {\n const hasImage = !!this.imageSrc;\n const isFullBleed = this.layout === 'full-bleed';\n\n const wrapperClasses = {\n 'feature-card': true,\n [`feature-card--layout-${this.layout}`]: true,\n [`feature-card--size-${this.cardSize}`]: true,\n };\n\n // Full-bleed mode: image background with overlay\n if (isFullBleed) {\n return (\n <Host>\n <div class={wrapperClasses}>\n {/ Background image /}\n {hasImage && (\n <div class=\"feature-card__background\">\n <img\n src={this.imageSrc}\n alt={this.imageAlt}\n class=\"feature-card__background-image\"\n />\n </div>\n )}\n\n {/ Content overlay with gradient /}\n <div class=\"feature-card__overlay\">\n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n </div>\n </Host>\n );\n }\n\n // Standard mode: theme card with image at bottom\n const isFlexible = this.cardSize === 'flexible';\n \n return (\n <Host>\n <div class={wrapperClasses}>\n <af-card theme={this.theme} stretch={isFlexible}>\n {/ Content area with typography lockup /}\n <div class=\"feature-card__content\">\n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n\n {/ Image area at bottom */}\n {hasImage && (\n <div class=\"feature-card__image-area\">\n <img\n src={this.imageSrc}\n alt={this.imageAlt}\n class=\"feature-card__image\"\n />\n </div>\n )}\n </af-card>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/affinda/af-footer.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-footer.entry.esm.js","sources":["src/components/af-footer/af-footer.css?tag=af-footer&encapsulation=scoped","src/components/af-footer/af-footer.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.footer {\n background-color: var(--colour-brand-inkwell, #14343b);\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n padding: 120px 0 0; /* Extra padding at top for overlapping cards /\n}\n\n.footer__container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 0 24px;\n}\n\n/ Top section layout /\n.footer__top {\n display: grid;\n grid-template-columns: 380px 1fr;\n gap: 48px;\n padding-bottom: 48px;\n}\n\n/ Brand column (left side) /\n.footer__brand {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.footer__brand-card {\n background-color: rgba(198, 213, 209, 0.08);\n border-radius: 16px;\n padding: 32px;\n}\n\n.footer__logo {\n margin-bottom: 24px;\n}\n\n.footer__logo svg,\n.footer__logo img {\n height: 32px;\n width: auto;\n}\n\n.footer__social {\n display: flex;\n gap: 12px;\n}\n\n.footer__social-link {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border: 1px solid rgba(198, 213, 209, 0.3);\n border-radius: 50%;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n transition: all 0.2s ease;\n}\n\n.footer__social-link:hover {\n background-color: rgba(198, 213, 209, 0.1);\n border-color: rgba(198, 213, 209, 0.5);\n}\n\n.footer__contact-card {\n background-color: rgba(198, 213, 209, 0.08);\n border-radius: 16px;\n padding: 24px 32px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.footer__contact-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.footer__contact-label {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n font-weight: 600;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n margin: 0;\n}\n\n.footer__contact-value {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n font-weight: 400;\n color: rgba(198, 213, 209, 0.7);\n margin: 0;\n}\n\n/ Navigation section (right side) /\n.footer__nav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.footer__nav-columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n}\n\n.footer__nav-column {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.footer__nav-heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n font-weight: 600;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n margin: 0;\n text-transform: none;\n}\n\n.footer__nav-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.footer__nav-list li {\n margin: 0;\n}\n\n.footer__nav-list a {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n font-weight: 400;\n color: rgba(198, 213, 209, 0.7);\n text-decoration: none;\n transition: color 0.2s ease;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.footer__nav-list a:hover {\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n}\n\n.footer__external-icon {\n opacity: 0.7;\n flex-shrink: 0;\n}\n\n/ Status indicator /\n.footer__status {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid rgba(198, 213, 209, 0.1);\n}\n\n.footer__status-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n.footer__status-dot--operational {\n background-color: #22c55e;\n}\n\n.footer__status-dot--issue {\n background-color: #ef4444;\n}\n\n.footer__status-text {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n color: rgba(198, 213, 209, 0.7);\n}\n\n.footer__status-link {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n text-decoration: underline;\n text-underline-offset: 2px;\n margin-left: 8px;\n}\n\n.footer__status-link:hover {\n text-decoration: none;\n}\n\n/ Bottom section /\n.footer__bottom {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 24px;\n padding: 24px 0;\n border-top: 1px solid rgba(198, 213, 209, 0.1);\n background-color: rgba(198, 213, 209, 0.05);\n margin: 0 -24px;\n / Honour iOS safe-area insets so the copyright strip doesn't sit under the\n home indicator (bottom) or under landscape edge cutouts (left/right). /\n padding-left: calc(24px + env(safe-area-inset-left));\n padding-right: calc(24px + env(safe-area-inset-right));\n padding-bottom: max(24px, env(safe-area-inset-bottom));\n}\n\n.footer__copyright {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n color: rgba(198, 213, 209, 0.7);\n margin: 0;\n}\n\n.footer__legal {\n display: flex;\n gap: 24px;\n}\n\n.footer__legal a {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n color: rgba(198, 213, 209, 0.7);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n\n.footer__legal a:hover {\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n text-decoration: none;\n}\n\n.footer__badges {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n\n.footer__badge {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.footer__badge svg {\n width: 100%;\n height: 100%;\n}\n\n/ Responsive styles /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .footer__top {\n grid-template-columns: 1fr;\n gap: 48px;\n }\n\n .footer__brand {\n flex-direction: row;\n gap: 16px;\n }\n\n .footer__brand-card,\n .footer__contact-card {\n flex: 1;\n }\n}\n\n/ mobile-only /\n@media (max-width: 768px) {\n .footer {\n padding: 48px 0 0;\n }\n\n .footer__top {\n gap: 32px;\n }\n\n .footer__brand {\n flex-direction: column;\n }\n\n .footer__nav-columns {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px;\n }\n\n .footer__bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__legal {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n/ ≤ small /\n@media (max-width: 480px) {\n .footer__container {\n padding: 0 16px;\n }\n\n .footer__brand-card,\n .footer__contact-card {\n padding: 24px;\n }\n\n .footer__nav-columns {\n grid-template-columns: 1fr;\n gap: 24px;\n }\n\n .footer__bottom {\n margin: 0 -16px;\n padding-left: calc(16px + env(safe-area-inset-left));\n padding-right: calc(16px + env(safe-area-inset-right));\n / padding-bottom inherits from base rule with max(24px, safe-area-inset-bottom) /\n }\n\n .footer__badges {\n width: 100%;\n justify-content: flex-start;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/\n Footer component for marketing pages\n * Provides a flexible, slot-based layout for footer content\n * All content is passed via slots - no hardcoded links or content\n /\n@Component({\n tag: 'af-footer',\n styleUrl: 'af-footer.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFooter {\n /* Copyright text (e.g., \"© 2025 Company Name. All rights reserved.\") /\n @Prop() copyrightText: string = '';\n\n /* Status message text /\n @Prop() statusText: string = '';\n\n /* Status page URL /\n @Prop() statusUrl: string = '';\n\n /* Whether systems are operational (shows green/red indicator) /\n @Prop() systemsOperational: boolean = true;\n\n /* Whether to show the status indicator /\n @Prop() showStatus: boolean = true;\n\n render() {\n return (\n <Host>\n <footer class=\"footer\">\n <div class=\"footer__container\">\n {/ Top section /}\n <div class=\"footer__top\">\n {/ Left column - Brand area /}\n <div class=\"footer__brand\">\n <div class=\"footer__brand-card\">\n <div class=\"footer__logo\">\n <slot name=\"logo\"></slot>\n </div>\n <div class=\"footer__social\">\n <slot name=\"social\"></slot>\n </div>\n </div>\n\n <div class=\"footer__contact-card\">\n <slot name=\"contact\"></slot>\n </div>\n </div>\n\n {/ Right section - Navigation columns /}\n <div class=\"footer__nav\">\n <div class=\"footer__nav-columns\">\n <slot name=\"nav\"></slot>\n </div>\n\n {/ Status indicator /}\n {this.showStatus && (\n <div class=\"footer__status\">\n <span class={`footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}`}></span>\n <span class=\"footer__status-text\">\n {this.statusText}\n </span>\n {this.statusUrl && (\n <a href={this.statusUrl} target=\"_blank\" rel=\"noopener noreferrer\" class=\"footer__status-link\">\n Learn more\n </a>\n )}\n </div>\n )}\n </div>\n </div>\n\n {/ Bottom section */}\n <div class=\"footer__bottom\">\n {this.copyrightText && (\n <p class=\"footer__copyright\">{this.copyrightText}</p>\n )}\n \n <div class=\"footer__legal\">\n <slot name=\"legal\"></slot>\n </div>\n\n <div class=\"footer__badges\">\n <slot name=\"badges\"></slot>\n </div>\n </div>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"af-footer.entry.esm.js","sources":["src/components/af-footer/af-footer.css?tag=af-footer&encapsulation=scoped","src/components/af-footer/af-footer.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.footer {\n background-color: var(--colour-brand-inkwell, #14343b);\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n padding: 120px 0 0; /* Extra padding at top for overlapping cards /\n}\n\n.footer__container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 0 24px;\n}\n\n/ Top section layout /\n.footer__top {\n display: grid;\n grid-template-columns: 380px 1fr;\n gap: 48px;\n padding-bottom: 48px;\n}\n\n/ Brand column (left side) /\n.footer__brand {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.footer__brand-card {\n background-color: rgba(198, 213, 209, 0.08);\n border-radius: 16px;\n padding: 32px;\n}\n\n.footer__logo {\n margin-bottom: 24px;\n}\n\n.footer__logo svg,\n.footer__logo img {\n height: 32px;\n width: auto;\n}\n\n.footer__social {\n display: flex;\n gap: 12px;\n}\n\n.footer__social-link {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border: 1px solid rgba(198, 213, 209, 0.3);\n border-radius: 50%;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n transition: all 0.2s ease;\n}\n\n.footer__social-link:hover {\n background-color: rgba(198, 213, 209, 0.1);\n border-color: rgba(198, 213, 209, 0.5);\n}\n\n.footer__contact-card {\n background-color: rgba(198, 213, 209, 0.08);\n border-radius: 16px;\n padding: 24px 32px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.footer__contact-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.footer__contact-label {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n font-weight: 600;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n margin: 0;\n}\n\n.footer__contact-value {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n font-weight: 400;\n color: rgba(198, 213, 209, 0.7);\n margin: 0;\n}\n\n/ Navigation section (right side) /\n.footer__nav {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.footer__nav-columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n}\n\n.footer__nav-column {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.footer__nav-heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n font-weight: 600;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n margin: 0;\n text-transform: none;\n}\n\n.footer__nav-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.footer__nav-list li {\n margin: 0;\n}\n\n.footer__nav-list a {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n font-weight: 400;\n color: rgba(198, 213, 209, 0.7);\n text-decoration: none;\n transition: color 0.2s ease;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.footer__nav-list a:hover {\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n}\n\n.footer__external-icon {\n opacity: 0.7;\n flex-shrink: 0;\n}\n\n/ Status indicator /\n.footer__status {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid rgba(198, 213, 209, 0.1);\n}\n\n.footer__status-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n.footer__status-dot--operational {\n / Affinda-palette green — tuned to sit comfortably against the inkwell\n * footer backdrop without the candy-bright Tailwind default. /\n background-color: var(--status-ok, #3E8F6E);\n}\n\n.footer__status-dot--issue {\n / Affinda-palette red — darkened toward soft-clay to match brand tone. /\n background-color: var(--status-issue, #B94A3B);\n}\n\n.footer__status-text {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n color: rgba(198, 213, 209, 0.7);\n}\n\n.footer__status-link {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n text-decoration: underline;\n text-underline-offset: 2px;\n margin-left: 8px;\n}\n\n.footer__status-link:hover {\n text-decoration: none;\n}\n\n/ Bottom section /\n.footer__bottom {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 24px;\n padding: 24px 0;\n border-top: 1px solid rgba(198, 213, 209, 0.1);\n background-color: rgba(198, 213, 209, 0.05);\n margin: 0 -24px;\n / Honour iOS safe-area insets so the copyright strip doesn't sit under the\n home indicator (bottom) or under landscape edge cutouts (left/right). /\n padding-left: calc(24px + env(safe-area-inset-left));\n padding-right: calc(24px + env(safe-area-inset-right));\n padding-bottom: max(24px, env(safe-area-inset-bottom));\n}\n\n.footer__copyright {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n color: rgba(198, 213, 209, 0.7);\n margin: 0;\n}\n\n.footer__legal {\n display: flex;\n gap: 24px;\n}\n\n.footer__legal a {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n color: rgba(198, 213, 209, 0.7);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n\n.footer__legal a:hover {\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n text-decoration: none;\n}\n\n.footer__badges {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n\n.footer__badge {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.footer__badge svg {\n width: 100%;\n height: 100%;\n}\n\n/ Responsive styles /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .footer__top {\n grid-template-columns: 1fr;\n gap: 48px;\n }\n\n .footer__brand {\n flex-direction: row;\n gap: 16px;\n }\n\n .footer__brand-card,\n .footer__contact-card {\n flex: 1;\n }\n}\n\n/ mobile-only /\n@media (max-width: 768px) {\n .footer {\n padding: 48px 0 0;\n }\n\n .footer__top {\n gap: 32px;\n }\n\n .footer__brand {\n flex-direction: column;\n }\n\n .footer__nav-columns {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px;\n }\n\n .footer__bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__legal {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n/ ≤ small /\n@media (max-width: 480px) {\n .footer__container {\n padding: 0 16px;\n }\n\n .footer__brand-card,\n .footer__contact-card {\n padding: 24px;\n }\n\n .footer__nav-columns {\n grid-template-columns: 1fr;\n gap: 24px;\n }\n\n .footer__bottom {\n margin: 0 -16px;\n padding-left: calc(16px + env(safe-area-inset-left));\n padding-right: calc(16px + env(safe-area-inset-right));\n / padding-bottom inherits from base rule with max(24px, safe-area-inset-bottom) /\n }\n\n .footer__badges {\n width: 100%;\n justify-content: flex-start;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/\n Footer component for marketing pages\n * Provides a flexible, slot-based layout for footer content\n * All content is passed via slots - no hardcoded links or content\n /\n@Component({\n tag: 'af-footer',\n styleUrl: 'af-footer.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFooter {\n /* Copyright text (e.g., \"© 2025 Company Name. All rights reserved.\") /\n @Prop() copyrightText: string = '';\n\n /* Status message text /\n @Prop() statusText: string = '';\n\n /* Status page URL /\n @Prop() statusUrl: string = '';\n\n /* Whether systems are operational (shows green/red indicator) /\n @Prop() systemsOperational: boolean = true;\n\n /* Whether to show the status indicator /\n @Prop() showStatus: boolean = true;\n\n render() {\n return (\n <Host>\n <footer class=\"footer\">\n <div class=\"footer__container\">\n {/ Top section /}\n <div class=\"footer__top\">\n {/ Left column - Brand area /}\n <div class=\"footer__brand\">\n <div class=\"footer__brand-card\">\n <div class=\"footer__logo\">\n <slot name=\"logo\"></slot>\n </div>\n <div class=\"footer__social\">\n <slot name=\"social\"></slot>\n </div>\n </div>\n\n <div class=\"footer__contact-card\">\n <slot name=\"contact\"></slot>\n </div>\n </div>\n\n {/ Right section - Navigation columns /}\n <div class=\"footer__nav\">\n <div class=\"footer__nav-columns\">\n <slot name=\"nav\"></slot>\n </div>\n\n {/ Status indicator /}\n {this.showStatus && (\n <div class=\"footer__status\">\n <span class={`footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}`}></span>\n <span class=\"footer__status-text\">\n {this.statusText}\n </span>\n {this.statusUrl && (\n <a href={this.statusUrl} target=\"_blank\" rel=\"noopener noreferrer\" class=\"footer__status-link\">\n Learn more\n </a>\n )}\n </div>\n )}\n </div>\n </div>\n\n {/ Bottom section */}\n <div class=\"footer__bottom\">\n {this.copyrightText && (\n <p class=\"footer__copyright\">{this.copyrightText}</p>\n )}\n \n <div class=\"footer__legal\">\n <slot name=\"legal\"></slot>\n </div>\n\n <div class=\"footer__badges\">\n <slot name=\"badges\"></slot>\n </div>\n </div>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,krLAAkrL;;MCazrL,QAAQ,GAAA,MAAA;AANrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAa,CAAA,aAAA,GAAW,EAAE;;AAG1B,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;;AAGvB,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;;AAGtB,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;;AAGlC,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAmEnC;IAjEC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAE5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EAEtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAQ,CACpB,EAGL,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,kBAAkB,GAAG,iCAAiC,GAAG,2BAA2B,EAAE,EAAS,CAAA,EACvI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,IAC9B,IAAI,CAAC,UAAU,CACX,EACN,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,KAAK,EAAC,qBAAqB,EAAA,EAAA,YAAA,CAE1F,CACL,CACG,CACP,CACG,CACF,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,aAAa,KACjB,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAE,EAAA,IAAI,CAAC,aAAa,CAAK,CACtD,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB,CACF,CACF,CACC,CACJ;;;;;;;"}

package/dist/affinda/af-grid.entry.esm.js.map CHANGED Viewed

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