@affinda/wc 0.0.28 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"af-feature-card.entry.cjs.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":["h","Host"],"mappings":"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"}
+{"version":3,"file":"af-feature-card.entry.cjs.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":["h","Host"],"mappings":"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"}

package/dist/cjs/af-feature-grid.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afFeatureGridCss = ".sc-af-feature-grid-h{display:block;width:100%}.feature-grid.sc-af-feature-grid{display:flex;flex-direction:column;align-items:center;width:100%}.feature-grid__cards.sc-af-feature-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;width:100%;max-width:1440px;align-items:stretch}.feature-grid__cards.sc-af-feature-grid>af-feature-card.sc-af-feature-grid{height:100%}.feature-grid--cols-3.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(3, 1fr)}.feature-grid--cols-2.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--cols-1.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:1fr}.feature-grid__progress.sc-af-feature-grid{display:none;width:100%;margin-top:16px}@media (max-width: 767px){.feature-grid__cards.sc-af-feature-grid{gap:16px}.feature-grid--mobile-list.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:1fr;gap:20px}.feature-grid--mobile-grid.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid::-webkit-scrollbar{display:none}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid>af-feature-card.sc-af-feature-grid{flex:0 0 280px;scroll-snap-align:start}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__progress.sc-af-feature-grid{display:block}}@media (min-width: 768px) and (max-width: 1023px){.feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--cols-3.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid,.feature-grid--cols-4.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}}";
 
@@ -80,7 +80,7 @@ const AfFeatureGrid = class {
             [`feature-grid--mobile-${this.mobileLayout}`]: true,
         };
         const showProgressLine = this.mobileLayout === 'scroll';
-        return (index.h(index.Host, { key: 'eb0a98e3493d564f6728613ef1c0b949dcbe7816' }, index.h("div", { key: 'c91f2fa779d050d9e9419eff301ba8fd80242bc0', class: gridClasses }, index.h("div", { key: '82989034a3f94cad6747429a1587c3ada160571f', class: "feature-grid__cards" }, index.h("slot", { key: '9ba0222a8ca2455fd83fbb054e1e4fc2c6f4e598' })), showProgressLine && (index.h("div", { key: '9c510e8f5366762546829210f5ec1f50788b4ecf', class: "feature-grid__progress" }, index.h("af-progress-line", { key: '584cd3da69b1b219743338bd6deb0a2c1bbab6b9', progress: this.scrollProgress }))))));
+        return (index.h(index.Host, { key: '9aacf2968c1723a036ab7583b052f56d7673543f' }, index.h("div", { key: 'c965c986ee73a4913e45406b461824927a541331', class: gridClasses }, index.h("div", { key: '177edb18e1342d60eda11adad85dad87a6c002c3', class: "feature-grid__cards" }, index.h("slot", { key: 'e0f15eba0bd58263f7a33474f34093785158f03d' })), showProgressLine && (index.h("div", { key: 'b952584d6b23121bfb820ebdcc1a526a34597f67', class: "feature-grid__progress" }, index.h("af-progress-line", { key: '97b4ac99e10078b6345a5567a6603290b8467af5', progress: this.scrollProgress }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afFieldsetCss = ":host{display:block}.fieldset{display:flex;flex-direction:column;border:none;padding:0;margin:0;min-inline-size:0}.fieldset.disabled{opacity:0.5;pointer-events:none}.legend{display:block;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));padding:0;margin:0 0 12px 0;width:100%}.items{display:flex}.items.orientation-vertical{flex-direction:column;gap:8px;align-items:flex-start}.items.orientation-horizontal{flex-direction:row;flex-wrap:wrap;gap:28px;align-items:center}::slotted(*){flex-shrink:0}.items.orientation-vertical ::slotted(*){width:100%}";
 

package/dist/cjs/af-footer-column.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afFooterColumnCss = ".sc-af-footer-column-h{display:block}.footer-column.sc-af-footer-column{display:flex;flex-direction:column;gap:16px}.footer-column__heading.sc-af-footer-column{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer-column__list.sc-af-footer-column{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer-column__list.sc-af-footer-column-s>li,.footer-column__list .sc-af-footer-column-s>li{margin:0}";
 
@@ -11,7 +11,7 @@ const AfFooterColumn = class {
         this.heading = '';
     }
     render() {
-        return (index.h(index.Host, { key: 'aff327dcb95b40e2835062053b7e59ee38d1e251' }, index.h("div", { key: '1f08aa09e7ffc52dda5603f5b3a1bb8ab8b42426', class: "footer-column" }, this.heading && (index.h("h5", { key: 'ef2532c50e755acb21f786edfbc23ade0097e385', class: "footer-column__heading" }, this.heading)), index.h("ul", { key: 'c96d5cda9bef99805eb17af7689a294adf80e33b', class: "footer-column__list" }, index.h("slot", { key: '5efdffcd7fc885e71a9460bc21a2d40bf486c14d' })))));
+        return (index.h(index.Host, { key: '02afc8f33ad0417467d4e795e77a1da74c7ede57' }, index.h("div", { key: 'f24cbe4720cf6e5df7351e9fe8cec05cca8753b0', class: "footer-column" }, this.heading && (index.h("h5", { key: '1f615da8d2c755dd0ab5a9679275538d4bb5945e', class: "footer-column__heading" }, this.heading)), index.h("ul", { key: '0ecdc874412334c418e049dcb0fff738cfdaa52b', class: "footer-column__list" }, index.h("slot", { key: '148b478bbd04204b3467329f98171a538b22d650' })))));
     }
 };
 AfFooterColumn.style = afFooterColumnCss;

package/dist/cjs/af-footer-link.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afFooterLinkCss = ".sc-af-footer-link-h{display:contents}li.sc-af-footer-link{margin:0;list-style:none}.footer-link.sc-af-footer-link{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);text-decoration:none;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px}.footer-link.sc-af-footer-link:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1)}.footer-link__external-icon.sc-af-footer-link{opacity:0.7;flex-shrink:0}";
 
@@ -13,7 +13,7 @@ const AfFooterLink = class {
         this.external = false;
     }
     render() {
-        return (index.h(index.Host, { key: '6a353087c08983e0e8a962ba97a2d1fa0afd1003' }, index.h("li", { key: '746175585030c809e05bd697a518f0ae0bc93d89' }, index.h("a", { key: '5409787ffbcd34661bbcd643fe68ba2e8354d127', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, index.h("slot", { key: '506e4056466d3764b4a2a55927932ad5fe5ea0ba' }), this.external && (index.h("svg", { key: '93e6405e6252095281d63cfbcf1548af54582c24', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, index.h("path", { key: '72370b0a31dccb15f92bf8fa67fa868e2f0f33ee', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (index.h(index.Host, { key: 'f6c6f0433dc6bcffe507c33c0dec2590a7b167c6' }, index.h("li", { key: 'c2e69faa620fe59b1cec6e5c32ed37d3a34d9fb7' }, index.h("a", { key: '35330c42625be987164190b40d1ed1649a259a7f', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, index.h("slot", { key: '43940df1b20b76d4f9dbec8a94ec39cd56080af3' }), this.external && (index.h("svg", { key: '7a3e086ead102abed43ed7e765d3012c5e963306', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, index.h("path", { key: 'e3c266072bca65c154cf925fadc4beb59dfe8f86', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
 };
 AfFooterLink.style = afFooterLinkCss;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
-const afFooterCss = ".sc-af-footer-h{display:block}.footer.sc-af-footer{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-tints-mistGreen-200, #C6D5D1);padding:120px 0 0}.footer__container.sc-af-footer{max-width:1280px;margin:0 auto;padding:0 24px}.footer__top.sc-af-footer{display:grid;grid-template-columns:380px 1fr;gap:48px;padding-bottom:48px}.footer__brand.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__brand-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:32px}.footer__logo.sc-af-footer{margin-bottom:24px}.footer__logo.sc-af-footer svg.sc-af-footer,.footer__logo.sc-af-footer img.sc-af-footer{height:32px;width:auto}.footer__social.sc-af-footer{display:flex;gap:12px}.footer__social-link.sc-af-footer{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.footer__social-link.sc-af-footer:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}.footer__contact-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:24px 32px;display:flex;flex-direction:column;gap:20px}.footer__contact-item.sc-af-footer{display:flex;flex-direction:column;gap:4px}.footer__contact-label.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.footer__contact-value.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}.footer__nav.sc-af-footer{display:flex;flex-direction:column;justify-content:space-between}.footer__nav-columns.sc-af-footer{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px}.footer__nav-column.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__nav-heading.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer__nav-list.sc-af-footer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer__nav-list.sc-af-footer li.sc-af-footer{margin:0}.footer__nav-list.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);text-decoration:none;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px}.footer__nav-list.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1)}.footer__external-icon.sc-af-footer{opacity:0.7;flex-shrink:0}.footer__status.sc-af-footer{display:flex;align-items:center;gap:8px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(198, 213, 209, 0.1)}.footer__status-dot.sc-af-footer{width:10px;height:10px;border-radius:50%;flex-shrink:0}.footer__status-dot--operational.sc-af-footer{background-color:#22c55e}.footer__status-dot--issue.sc-af-footer{background-color:#ef4444}.footer__status-text.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7)}.footer__status-link.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:underline;text-underline-offset:2px;margin-left:8px}.footer__status-link.sc-af-footer:hover{text-decoration:none}.footer__bottom.sc-af-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:24px 0;border-top:1px solid rgba(198, 213, 209, 0.1);background-color:rgba(198, 213, 209, 0.05);margin:0 -24px;padding-left:calc(24px + env(safe-area-inset-left));padding-right:calc(24px + env(safe-area-inset-right));padding-bottom:max(24px, env(safe-area-inset-bottom))}.footer__copyright.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);margin:0}.footer__legal.sc-af-footer{display:flex;gap:24px}.footer__legal.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);text-decoration:underline;text-underline-offset:2px}.footer__legal.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:none}.footer__badges.sc-af-footer{display:flex;gap:16px;align-items:center}.footer__badge.sc-af-footer{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.footer__badge.sc-af-footer svg.sc-af-footer{width:100%;height:100%}@media (max-width: 1024px){.footer__top.sc-af-footer{grid-template-columns:1fr;gap:48px}.footer__brand.sc-af-footer{flex-direction:row;gap:16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{flex:1}}@media (max-width: 768px){.footer.sc-af-footer{padding:48px 0 0}.footer__top.sc-af-footer{gap:32px}.footer__brand.sc-af-footer{flex-direction:column}.footer__nav-columns.sc-af-footer{grid-template-columns:repeat(2, 1fr);gap:32px}.footer__bottom.sc-af-footer{flex-direction:column;align-items:flex-start;gap:16px}.footer__legal.sc-af-footer{flex-wrap:wrap;gap:16px}}@media (max-width: 480px){.footer__container.sc-af-footer{padding:0 16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{padding:24px}.footer__nav-columns.sc-af-footer{grid-template-columns:1fr;gap:24px}.footer__bottom.sc-af-footer{margin:0 -16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}.footer__badges.sc-af-footer{width:100%;justify-content:flex-start}}";
+const afFooterCss = ".sc-af-footer-h{display:block}.footer.sc-af-footer{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-tints-mistGreen-200, #C6D5D1);padding:120px 0 0}.footer__container.sc-af-footer{max-width:1280px;margin:0 auto;padding:0 24px}.footer__top.sc-af-footer{display:grid;grid-template-columns:380px 1fr;gap:48px;padding-bottom:48px}.footer__brand.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__brand-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:32px}.footer__logo.sc-af-footer{margin-bottom:24px}.footer__logo.sc-af-footer svg.sc-af-footer,.footer__logo.sc-af-footer img.sc-af-footer{height:32px;width:auto}.footer__social.sc-af-footer{display:flex;gap:12px}.footer__social-link.sc-af-footer{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.footer__social-link.sc-af-footer:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}.footer__contact-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:24px 32px;display:flex;flex-direction:column;gap:20px}.footer__contact-item.sc-af-footer{display:flex;flex-direction:column;gap:4px}.footer__contact-label.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.footer__contact-value.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}.footer__nav.sc-af-footer{display:flex;flex-direction:column;justify-content:space-between}.footer__nav-columns.sc-af-footer{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px}.footer__nav-column.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__nav-heading.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer__nav-list.sc-af-footer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer__nav-list.sc-af-footer li.sc-af-footer{margin:0}.footer__nav-list.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);text-decoration:none;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px}.footer__nav-list.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1)}.footer__external-icon.sc-af-footer{opacity:0.7;flex-shrink:0}.footer__status.sc-af-footer{display:flex;align-items:center;gap:8px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(198, 213, 209, 0.1)}.footer__status-dot.sc-af-footer{width:10px;height:10px;border-radius:50%;flex-shrink:0}.footer__status-dot--operational.sc-af-footer{background-color:var(--status-ok, #3E8F6E)}.footer__status-dot--issue.sc-af-footer{background-color:var(--status-issue, #B94A3B)}.footer__status-text.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7)}.footer__status-link.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:underline;text-underline-offset:2px;margin-left:8px}.footer__status-link.sc-af-footer:hover{text-decoration:none}.footer__bottom.sc-af-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:24px 0;border-top:1px solid rgba(198, 213, 209, 0.1);background-color:rgba(198, 213, 209, 0.05);margin:0 -24px;padding-left:calc(24px + env(safe-area-inset-left));padding-right:calc(24px + env(safe-area-inset-right));padding-bottom:max(24px, env(safe-area-inset-bottom))}.footer__copyright.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);margin:0}.footer__legal.sc-af-footer{display:flex;gap:24px}.footer__legal.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);text-decoration:underline;text-underline-offset:2px}.footer__legal.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:none}.footer__badges.sc-af-footer{display:flex;gap:16px;align-items:center}.footer__badge.sc-af-footer{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.footer__badge.sc-af-footer svg.sc-af-footer{width:100%;height:100%}@media (max-width: 1024px){.footer__top.sc-af-footer{grid-template-columns:1fr;gap:48px}.footer__brand.sc-af-footer{flex-direction:row;gap:16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{flex:1}}@media (max-width: 768px){.footer.sc-af-footer{padding:48px 0 0}.footer__top.sc-af-footer{gap:32px}.footer__brand.sc-af-footer{flex-direction:column}.footer__nav-columns.sc-af-footer{grid-template-columns:repeat(2, 1fr);gap:32px}.footer__bottom.sc-af-footer{flex-direction:column;align-items:flex-start;gap:16px}.footer__legal.sc-af-footer{flex-wrap:wrap;gap:16px}}@media (max-width: 480px){.footer__container.sc-af-footer{padding:0 16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{padding:24px}.footer__nav-columns.sc-af-footer{grid-template-columns:1fr;gap:24px}.footer__bottom.sc-af-footer{margin:0 -16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}.footer__badges.sc-af-footer{width:100%;justify-content:flex-start}}";
 
 const AfFooter = class {
     constructor(hostRef) {
@@ -19,7 +19,7 @@ const AfFooter = class {
         this.showStatus = true;
     }
     render() {
-        return (index.h(index.Host, { key: 'b0fceb1896656d8a17b3afda396dd74a9181668e' }, index.h("footer", { key: '6b48abc3e62d21f96fb3c4aa84b2eedd292e3386', class: "footer" }, index.h("div", { key: 'ba192ee7d600ddce8e1c2fcc5631259c5eff89db', class: "footer__container" }, index.h("div", { key: 'f7fa42a5d13aacf16bd49ab2a3257b80156383dd', class: "footer__top" }, index.h("div", { key: '25c7452fbba9a33805fa419e1d91da04c97e3843', class: "footer__brand" }, index.h("div", { key: 'd3e0c2b52ce7e6a1f399c13ed9d6f1a1c75d5c35', class: "footer__brand-card" }, index.h("div", { key: '197934823ea93f20575e3f737c777bd3fe6bdec9', class: "footer__logo" }, index.h("slot", { key: 'f2b8ab9d513704d6c5e3c2e78cd73a264e78225a', name: "logo" })), index.h("div", { key: 'c00e0d6bad4a5c99e6e39dab101b77c2fae36495', class: "footer__social" }, index.h("slot", { key: 'de662f1f8e9deb052eb79aed4a05a98c2d9f65aa', name: "social" }))), index.h("div", { key: '3c678879008647c05a60803ca7a067c4e4e61746', class: "footer__contact-card" }, index.h("slot", { key: '58071ccf22c23b1ef5341505dcf1d0ba57357512', name: "contact" }))), index.h("div", { key: '1eed42db812f2dce3aa935ab5ac1096625848ae6', class: "footer__nav" }, index.h("div", { key: '50aef430fdb85c2087dd2e2d87ad8cf1d16c7c8b', class: "footer__nav-columns" }, index.h("slot", { key: 'b900525b63c6072707a5b0d35f72237d1b2fe6a9', name: "nav" })), this.showStatus && (index.h("div", { key: 'fe957d27c0cbaf5a4e2627c3f37de884a87d09d7', class: "footer__status" }, index.h("span", { key: 'c123f1e69a1b8958eefede7510ae65395c58d948', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), index.h("span", { key: '9524fa81546c3755e0f28d1f335915dfadf0c08a', class: "footer__status-text" }, this.statusText), this.statusUrl && (index.h("a", { key: 'adac84ed1240b1587ad4dd730813243009bb55b7', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), index.h("div", { key: 'e662a65603a58375ecda64c12f60936ef4bf7535', class: "footer__bottom" }, this.copyrightText && (index.h("p", { key: '88688f225266e295d4f97ed64fdfe1a67a26561a', class: "footer__copyright" }, this.copyrightText)), index.h("div", { key: '9e37465b342340a36b309f2da9b5a0d68d5d3bec', class: "footer__legal" }, index.h("slot", { key: 'c4f6763e9affaf59c7740a78e738938ab25576d0', name: "legal" })), index.h("div", { key: 'ccdd834682869e69d9c09d2b8f1a6cb3648b671b', class: "footer__badges" }, index.h("slot", { key: 'cd10ff8b4e90f9a38270b5ed5d7884cea7f241a2', name: "badges" })))))));
+        return (index.h(index.Host, { key: '0f0b3ac453f4bf2f17d0185484c312aae99d4f5e' }, index.h("footer", { key: '017d608cb00c9fb3da012fe9941e80cd9d5135e8', class: "footer" }, index.h("div", { key: '545a499bd2b75a1efea1efe1659e336753bcce46', class: "footer__container" }, index.h("div", { key: '66ed8e54b1af9445e15cb4e650d54a240f158c8c', class: "footer__top" }, index.h("div", { key: 'b4b442dbcaf2e52aae6c76706ecff5aa928bf2f5', class: "footer__brand" }, index.h("div", { key: '73ad4e70efa91fe96c6de0b80f270c470c73c8e4', class: "footer__brand-card" }, index.h("div", { key: '0ef27728bb86632b9451ed94220528f527ba62bb', class: "footer__logo" }, index.h("slot", { key: '5f6de1e2b9f7e9523ce49414ec1bf88a8411478b', name: "logo" })), index.h("div", { key: 'fdc742da1adce4e0a874c2ee1998e051aea5f10a', class: "footer__social" }, index.h("slot", { key: '3073881efc66cf692b3d986e11798587cba6f272', name: "social" }))), index.h("div", { key: '5fe296475d338597af763acb3957a406b5fdf887', class: "footer__contact-card" }, index.h("slot", { key: '38be1a96c41c246fba05b7ec080b50330ab43f22', name: "contact" }))), index.h("div", { key: 'e12c9774d5d4806728b375386a0491ed2e7a1d74', class: "footer__nav" }, index.h("div", { key: '6c5e293d11a87f48add7799c86fe5ff14618094c', class: "footer__nav-columns" }, index.h("slot", { key: '5d189a739cbdb1b989eb77008aac4b3f91be4940', name: "nav" })), this.showStatus && (index.h("div", { key: '29f8108dfd88e8f83f75dc765870621055bb952a', class: "footer__status" }, index.h("span", { key: '4e61880dc288cfc19fbef5a91fdc5295512d725a', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), index.h("span", { key: 'dd1055516d076ac8a814e7b60bedf6989341225c', class: "footer__status-text" }, this.statusText), this.statusUrl && (index.h("a", { key: '7ddb72ef4df731dcadc479a6ecbe059b1ca569cb', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), index.h("div", { key: 'c5acf298a42067cad20c914350e6f89b98e16162', class: "footer__bottom" }, this.copyrightText && (index.h("p", { key: 'ed923670ea3258db98b0eb7a5e197e87b5f45784', class: "footer__copyright" }, this.copyrightText)), index.h("div", { key: '7a71bf0cf0f44bb38c4c696fd151ecbea2d3de1b', class: "footer__legal" }, index.h("slot", { key: 'afef7ce942c8fe362fb83d03438604378b4ac8f7', name: "legal" })), index.h("div", { key: 'b8940476d2cae97bc70916f4252e2a3337da37b8', class: "footer__badges" }, index.h("slot", { key: '3b076b800f2771237ea8f7fc2f1cc2c46c2e4ccc', name: "badges" })))))));
     }
 };
 AfFooter.style = afFooterCss;

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

@@ -1 +1 @@
-{"version":3,"file":"af-footer.entry.cjs.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":["h","Host"],"mappings":"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"}
+{"version":3,"file":"af-footer.entry.cjs.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":["h","Host"],"mappings":"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"}

package/dist/cjs/af-grid-callout.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afGridCalloutCss = ".sc-af-grid-callout-h{display:block;width:100%}.grid-callout.sc-af-grid-callout{display:flex;width:100%;gap:40px;align-items:stretch}.grid-callout__image-container.sc-af-grid-callout{flex:0 0 auto;width:45%;min-height:400px;position:relative;overflow:hidden}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0 4000px 4000px 0;margin-left:calc(-1 * var(--container-padding, 80px))}.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:4000px 0 0 4000px;margin-right:calc(-1 * var(--container-padding, 80px))}.grid-callout__image.sc-af-grid-callout{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.grid-callout__content.sc-af-grid-callout{flex:1;display:flex;flex-direction:column;gap:48px;padding:40px 0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:40px}.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-right:40px}.grid-callout--no-image.sc-af-grid-callout{flex-direction:column}.grid-callout--no-image.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding:0}.grid-callout__heading.sc-af-grid-callout{max-width:840px}.grid-callout__items.sc-af-grid-callout{display:grid;gap:40px;width:100%}.grid-callout__items--cols-2.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items--cols-3.sc-af-grid-callout{grid-template-columns:repeat(3, 1fr)}.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(4, 1fr)}.grid-callout__cta.sc-af-grid-callout{display:flex;gap:12px;flex-wrap:wrap}.grid-callout__cta.sc-af-grid-callout:empty{display:none}@media (max-width: 1024px){.grid-callout.sc-af-grid-callout{gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:40%}.grid-callout__content.sc-af-grid-callout{gap:40px}.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items.sc-af-grid-callout{gap:32px}}@media (max-width: 768px){.grid-callout.sc-af-grid-callout{flex-direction:column;gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:calc(100% + 2 * var(--container-padding, 20px));min-height:280px;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px));border-radius:0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px))}.grid-callout__content.sc-af-grid-callout{padding:0;gap:32px}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:0;padding-right:0}.grid-callout__items.sc-af-grid-callout{grid-template-columns:1fr;gap:32px}.grid-callout__items--cols-2.sc-af-grid-callout,.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:1fr}}";
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afGridCss = ":host{display:block;box-sizing:border-box}:host([hidden]){display:none}.grid{display:grid;grid-template-columns:repeat(var(--grid-columns), 1fr);gap:var(--grid-gap);align-items:var(--grid-align)}@media (max-width: 1024px){.grid{grid-template-columns:repeat(var(--grid-columns-lg), 1fr)}}@media (max-width: 768px){.grid{grid-template-columns:repeat(var(--grid-columns-md), 1fr)}}@media (max-width: 480px){.grid{grid-template-columns:repeat(var(--grid-columns-sm), 1fr)}}";
 
@@ -28,14 +28,14 @@ const AfGrid = class {
             end: 'end',
             stretch: 'stretch',
         };
-        return (index.h(index.Host, { key: 'bcc57cad4861ded2353d7668fa76281f327efac8', style: {
+        return (index.h(index.Host, { key: '440c50dbd3a572f292b6a5b4b31845a70b5871bf', style: {
                 '--grid-columns': String(this.columns),
                 '--grid-columns-lg': String(this.columnsLg ?? this.columns),
                 '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),
                 '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),
                 '--grid-gap': `var(--space-${this.gap})`,
                 '--grid-align': alignMap[this.align],
-            } }, index.h("div", { key: 'e4aaf0f25478b42470f24b7eb831f6598be15423', class: "grid" }, index.h("slot", { key: 'bc40be3d30c45c2af348bb67804c25f29d606895' }))));
+            } }, index.h("div", { key: '76ddac9b00743e64fa4e49e9fa80d02088dc858c', class: "grid" }, index.h("slot", { key: 'ac6ce8acf4e1ca3acabff3176b06a57eee265b72' }))));
     }
 };
 AfGrid.style = afGridCss;

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

@@ -1 +1 @@
-{"version":3,"file":"af-grid.entry.cjs.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":["h","Host"],"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,QACEA,OAAA,CAACC,UAAI,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,EAE3BD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACfA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}
+{"version":3,"file":"af-grid.entry.cjs.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":["h","Host"],"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,QACEA,OAAA,CAACC,UAAI,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,EAE3BD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACfA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}