@affinda/wc 0.5.0 → 0.6.0

package/dist/components/{p-CmU4eYJE.js → p-B4bimVSM.js}

@@ -25,11 +25,11 @@ const AfTag = /*@__PURE__*/ proxyCustomElement(class AfTag extends H {
     render() {
         const TagElement = this.href ? 'a' : 'span';
         const linkProps = this.href ? { href: this.href } : {};
-        return (h(Host, { key: '6317b50a0fa62e85bfb9141a6653494cc2b1892d' }, h(TagElement, { key: 'b9b13cf62afe67ccd4aaac53dbc44b736afd0084', class: {
+        return (h(Host, { key: '95d6f9fcae0b4117edc2bd0918feeeee3ab32d17' }, h(TagElement, { key: 'fb6f02834d02b8b5b43b3052f72688a99ea9f6d4', class: {
                 'tag': true,
                 [`size-${this.size}`]: true,
                 [`variant-${this.variant}`]: true,
-            }, ...linkProps }, h("slot", { key: 'd4f5a9e748fd2a155845c9ad7bd5f414a25f694f' }))));
+            }, ...linkProps }, h("slot", { key: 'a259918d262801ee8f005374ee2517535bcbd6f8' }))));
     }
     static get style() { return afTagCss; }
 }, [257, "af-tag", {
@@ -52,6 +52,6 @@ function defineCustomElement() {
 }
 
 export { AfTag as A, defineCustomElement as d };
-//# sourceMappingURL=p-CmU4eYJE.js.map
+//# sourceMappingURL=p-B4bimVSM.js.map
 
-//# sourceMappingURL=p-CmU4eYJE.js.map
+//# sourceMappingURL=p-B4bimVSM.js.map

package/dist/components/{p-CmU4eYJE.js.map → p-B4bimVSM.js.map}

@@ -1 +1 @@
-{"file":"p-CmU4eYJE.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,sjEAAsjE;;MCyB1jE,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,SAAS;AA0BxC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: DEFAULT (inherits from parent theme context)\n   ========================================================================== */\n\n.tag.variant-default {\n  background-color: var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-default:hover {\n  background-color: var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   EXPLICIT THEME VARIANTS\n   ========================================================================== */\n\n.tag.variant-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-brand-white, #ffffff);\n}\n\n.tag.variant-inkwell:hover {\n  background-color: var(--colour-tints-inkwell-500, #1e4a48);\n}\n\n.tag.variant-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-white:hover {\n  background-color: var(--colour-tints-mist-green-100, #e1eee1);\n}\n\n.tag.variant-soft-clay {\n  background-color: var(--colour-brand-soft-clay, #b09670);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-soft-clay:hover {\n  background-color: var(--colour-tints-soft-clay-400, #c0ab8d);\n}\n\n.tag.variant-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-mist-green:hover {\n  background-color: var(--colour-tints-mist-green-200, #d2e8e3);\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n.tag:focus {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'default' | 'inkwell' | 'white' | 'soft-clay' | 'mist-green';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n *\n * The `default` variant inherits its colors from the parent theme context\n * (af-section, af-card). Use explicit variants (`inkwell`, `white`,\n * `soft-clay`, `mist-green`) to override.\n *\n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\" variant=\"inkwell\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"white\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding (default)\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * Visual variant of the tag. `default` inherits tag colors from the\n   * parent theme context. Theme-named variants force a specific palette.\n   */\n  @Prop() variant: TagVariant = 'default';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B4bimVSM.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,sjEAAsjE;;MCyB1jE,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,SAAS;AA0BxC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: DEFAULT (inherits from parent theme context)\n   ========================================================================== */\n\n.tag.variant-default {\n  background-color: var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-default:hover {\n  background-color: var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   EXPLICIT THEME VARIANTS\n   ========================================================================== */\n\n.tag.variant-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-brand-white, #ffffff);\n}\n\n.tag.variant-inkwell:hover {\n  background-color: var(--colour-tints-inkwell-500, #1e4a48);\n}\n\n.tag.variant-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-white:hover {\n  background-color: var(--colour-tints-mist-green-100, #e1eee1);\n}\n\n.tag.variant-soft-clay {\n  background-color: var(--colour-brand-soft-clay, #b09670);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-soft-clay:hover {\n  background-color: var(--colour-tints-soft-clay-400, #c0ab8d);\n}\n\n.tag.variant-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-mist-green:hover {\n  background-color: var(--colour-tints-mist-green-200, #d2e8e3);\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n.tag:focus {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'default' | 'inkwell' | 'white' | 'soft-clay' | 'mist-green';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n *\n * The `default` variant inherits its colors from the parent theme context\n * (af-section, af-card). Use explicit variants (`inkwell`, `white`,\n * `soft-clay`, `mist-green`) to override.\n *\n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\" variant=\"inkwell\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"white\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding (default)\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * Visual variant of the tag. `default` inherits tag colors from the\n   * parent theme context. Theme-named variants force a specific palette.\n   */\n  @Prop() variant: TagVariant = 'default';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-WJ7nfpxz.js → p-BSgEGp12.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
 import { d as defineCustomElement$3 } from './p-FV14KcoH.js';
-import { d as defineCustomElement$2 } from './p-CPPy4ZvS.js';
+import { d as defineCustomElement$2 } from './p-sIePTJnR.js';
 import { d as defineCustomElement$1 } from './p-CkaL7yIW.js';
 
 const afHeroCss = ".sc-af-hero-h{display:block;position:relative;width:100%;--af-hero-image-lift:-260px;--af-hero-image-min-height:360px}.hero__section.sc-af-hero{position:relative;overflow:hidden}.hero__paperclip.sc-af-hero{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none;z-index:0;width:655px;height:754px}@media (max-width: 991px){.hero__paperclip.sc-af-hero{width:480px;height:552px}}@media (max-width: 767px){.hero__paperclip.sc-af-hero{display:none}}.hero__inner.sc-af-hero{position:relative;z-index:1;padding-bottom:40px}.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:124px}.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:164px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:180px}.hero__grid.sc-af-hero{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr auto;gap:48px}.hero--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr 1fr}.hero__copy.sc-af-hero{padding-left:16px}.hero--inkwell-photo.hero--pad-loose.sc-af-hero-h .hero__copy.sc-af-hero{padding-bottom:120px}.hero--inkwell-centered.sc-af-hero-h .hero__copy.sc-af-hero{padding-left:0;text-align:center}.hero__badge.sc-af-hero:not(:has(*)){display:none}.hero__badge.sc-af-hero:has(*){margin-bottom:16px}.hero__copy.sc-af-hero-s>[slot='badge'],.hero__copy .sc-af-hero-s>[slot='badge']{display:inline-block}.hero__buttons.sc-af-hero{margin-top:32px}.hero__buttons.sc-af-hero:empty{display:none}.hero--inkwell-centered.sc-af-hero-h .hero__buttons.sc-af-hero{display:flex;justify-content:center}.sc-af-hero-h{--af-hero-blob-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');--af-hero-blob-mask-mobile:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>')}.hero__image.sc-af-hero{min-height:var(--af-hero-image-min-height);overflow:visible;margin-top:var(--af-hero-image-lift);position:relative;z-index:1}.hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero__image--masked.sc-af-hero-s>picture img,.hero__image--masked .sc-af-hero-s>picture img,.hero__image--masked.sc-af-hero-s>.af-hero-image,.hero__image--masked .sc-af-hero-s>.af-hero-image{display:block;width:100%;height:auto;-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__illustration.sc-af-hero{flex:0 0 auto;width:100%;max-width:432px;line-height:0;justify-self:end}.hero__illustration.sc-af-hero-s>svg,.hero__illustration .sc-af-hero-s>svg,.hero__illustration.sc-af-hero-s>img,.hero__illustration .sc-af-hero-s>img{width:100%;height:auto;display:block;border-radius:16px}.hero--inkwell-illustration.sc-af-hero-h .hero__illustration.sc-af-hero{max-width:540px}.hero__logos.sc-af-hero{position:relative;z-index:2}.hero__logos.sc-af-hero:not(:has(*)){display:none}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:-240px;padding-top:48px;padding-bottom:48px;background:var(--af-background-base, var(--colour-brand-inkwell, #14343b));border-top:1px solid\n    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45))}@media (max-width: 991px){.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero,.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:112px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:144px}.hero__grid.sc-af-hero{grid-template-columns:1fr;gap:32px}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr}.hero__copy.sc-af-hero{padding-left:0;padding-bottom:0}.hero__illustration.sc-af-hero{max-width:360px;margin-inline:auto;justify-self:center}.hero__image.sc-af-hero{margin-top:0;min-height:auto}.sc-af-hero-h.hero--inkwell-photo .hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero--inkwell-photo.sc-af-hero-h .hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask-mobile);mask-image:var(--af-hero-blob-mask-mobile)}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:24px;padding-top:32px;padding-bottom:32px;background:transparent;border-top:none}}";
@@ -83,12 +83,12 @@ const AfHero = /*@__PURE__*/ proxyCustomElement(class AfHero extends H {
         const hasIllustration = v === 'inkwell-illustration' ||
             v === 'soft-clay-illustration' ||
             v === 'mist-green-illustration';
-        return (h(Host, { key: '0a992496d31ad5bfbc3d987f8e14d4947ed4634a', class: {
+        return (h(Host, { key: 'c40393e3a50d1beecbe83804a1407a51d46e82ce', class: {
                 [`hero--${v}`]: true,
                 [`hero--pad-${this.topPad}`]: true,
                 [`hero--theme-${this.theme}`]: true,
                 'hero--float-navbar': this.resolvedFloatNavbar,
-            } }, h("af-section", { key: 'e7fb9c00edf9df24b3a6f31ec73153f076623b80', theme: this.theme, padding: "none", container: false, class: "hero__section" }, centered && (h("div", { key: 'c11031876d2de4e7bdec1ff11ff05488f91e1b95', class: "hero__paperclip", "aria-hidden": "true" }, h("slot", { key: 'e374f0ebeb82e4d1f5f0be91a0067a2d6c0dc5ec', name: "paperclip" }))), h("af-container", { key: '516ef86f39140df14422abd4dc2688d5afe95327', class: "hero__inner" }, centered ? (this.renderCopy()) : (h("div", { class: "hero__grid" }, this.renderCopy(), hasImage && this.renderPhoto(), hasIllustration && this.renderIllustration()))), h("div", { key: '946d5bd24bba79faa0aa11af2313538d9131acdc', class: "hero__logos" }, h("slot", { key: '3e6f93398f642963bf38f95dbd9c037f26dcf8f9', name: "logos-below" })))));
+            } }, h("af-section", { key: '77ce170dadae5685fd58ccd3e9b679099ed7068f', theme: this.theme, padding: "none", container: false, class: "hero__section" }, centered && (h("div", { key: 'e1f70ac7c9f4f708a3ac033aaba9c61aa1c5ca58', class: "hero__paperclip", "aria-hidden": "true" }, h("slot", { key: '4cc7a2ca78151e4190e81af45ad9989e28c667b1', name: "paperclip" }))), h("af-container", { key: 'c3e00acd79776207246290a7b3d5b8bb7b776791', class: "hero__inner" }, centered ? (this.renderCopy()) : (h("div", { class: "hero__grid" }, this.renderCopy(), hasImage && this.renderPhoto(), hasIllustration && this.renderIllustration()))), h("div", { key: '0cdd9f9071e3670a6d4b4a6082abe9252750d3b5', class: "hero__logos" }, h("slot", { key: '8b53c58048c404b6d057f0e56d1ec0402ffd6e00', name: "logos-below" })))));
     }
     get el() { return this; }
     static get style() { return afHeroCss; }
@@ -131,6 +131,6 @@ function defineCustomElement() {
 }
 
 export { AfHero as A, defineCustomElement as d };
-//# sourceMappingURL=p-WJ7nfpxz.js.map
+//# sourceMappingURL=p-BSgEGp12.js.map
 
-//# sourceMappingURL=p-WJ7nfpxz.js.map
+//# sourceMappingURL=p-BSgEGp12.js.map

package/dist/components/{p-WJ7nfpxz.js.map → p-BSgEGp12.js.map}

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

package/dist/components/{p-DUWgh2he.js → p-BgQvXXuB.js}

@@ -80,7 +80,7 @@ const AfTabBar = /*@__PURE__*/ proxyCustomElement(class AfTabBar extends H {
             [`shape-${this.shape}`]: true,
             [`breakpoint-${this.breakpoint}`]: true,
         };
-        return (h(Host, { key: 'b1fa40c2156ac7271650aafd27d369c3a8224f44', role: "tablist" }, h("div", { key: 'e92eaef79f5df92cca1b2170218df2668afc031d', class: containerClasses }, h("slot", { key: '307aea867005fe40899b54d9fe1e31ecca0528e8' }))));
+        return (h(Host, { key: '41e03f4561dc7f11c19b533e659b07053f08a5e3', role: "tablist" }, h("div", { key: '191491f64e3d77fafe58e241f777a6a9e3b79e04', class: containerClasses }, h("slot", { key: '181e1169bd9215cb99d8bd0dabeaa49aac5fc24a' }))));
     }
     get el() { return this; }
     static get style() { return afTabBarCss; }
@@ -103,6 +103,6 @@ function defineCustomElement() {
 }
 
 export { AfTabBar as A, defineCustomElement as d };
-//# sourceMappingURL=p-DUWgh2he.js.map
+//# sourceMappingURL=p-BgQvXXuB.js.map
 
-//# sourceMappingURL=p-DUWgh2he.js.map
+//# sourceMappingURL=p-BgQvXXuB.js.map

package/dist/components/{p-DUWgh2he.js.map → p-BgQvXXuB.js.map}

@@ -1 +1 @@
-{"file":"p-DUWgh2he.js","mappings":";;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAgB,QAAQ;AAEtD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAqB,SAAS;AA6ElE;IA3EC,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;IACK,cAAc,GAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACnB,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;YACrC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC;AACtD,SAAC,CAAC;;AAGJ;;AAEG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;QAC5F,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,QAAQ,CAAC,aAAa,IAAI,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC;QAE3G,IAAI,YAAY,KAAK,EAAE;YAAE;QAEzB,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC1B;AACF,YAAA;gBACE;;;AAIJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC;QAC5D,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE;;;IAIlB,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;SACxC;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab-bar/af-tab-bar.css?tag=af-tab-bar&encapsulation=shadow","src/components/af-tab-bar/af-tab-bar.tsx"],"sourcesContent":["/* TabBar component styles */\n:host {\n  display: block;\n  width: 100%;\n}\n\n.tab-bar {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);\n}\n\n/* Custom scrollbar for WebKit browsers */\n.tab-bar::-webkit-scrollbar {\n  height: 4px;\n}\n\n.tab-bar::-webkit-scrollbar-track {\n  background: var(--af-scrollbar-track, #d1ddda);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb {\n  background: var(--af-scrollbar-thumb, #8a7049);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb:hover {\n  background: var(--af-scrollbar-thumb-hover, #8d785a);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab-bar.shape-square {\n  gap: 0;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab-bar.shape-pill {\n  gap: 0;\n  padding: var(--space-2, 8px);\n  background-color: var(--af-background-level-1, #e8eeed);\n  border-radius: var(--radius-pill, 999px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: MOBILE\n   ========================================================================== */\n\n.tab-bar.breakpoint-mobile {\n  /* Mobile uses compact spacing */\n}\n\n.tab-bar.breakpoint-mobile.shape-square {\n  /* Tabs handle their own padding in mobile */\n}\n\n.tab-bar.breakpoint-mobile.shape-pill {\n  padding: var(--space-1, 4px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: DESKTOP\n   ========================================================================== */\n\n.tab-bar.breakpoint-desktop {\n  /* Desktop uses more generous spacing */\n}\n\n.tab-bar.breakpoint-desktop.shape-square {\n  /* Tabs handle their own padding in desktop mode */\n}\n\n.tab-bar.breakpoint-desktop.shape-pill {\n  padding: var(--space-2, 8px);\n}\n\n","import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' | 'pill';\nexport type TabBarBreakpoint = 'mobile' | 'desktop';\n\n/**\n * TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n *   <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n *   <af-tab label=\"Details\" value=\"details\"></af-tab>\n *   <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n */\n@Component({\n  tag: 'af-tab-bar',\n  styleUrl: 'af-tab-bar.css',\n  shadow: true\n})\nexport class AfTabBar {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual shape variant for all tabs\n   * - `square` - Rectangular tabs with bottom border indicator\n   * - `pill` - Rounded pill tabs with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n  /**\n   * Responsive breakpoint mode\n   * - `mobile` - Compact layout with smaller padding\n   * - `desktop` - Larger layout with more generous spacing\n   */\n  @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n  componentDidLoad() {\n    this.syncChildProps();\n  }\n\n  componentDidUpdate() {\n    this.syncChildProps();\n  }\n\n  /**\n   * Sync shape and breakpoint props to child af-tab elements\n   */\n  private syncChildProps() {\n    const tabs = this.el.querySelectorAll('af-tab');\n    tabs.forEach((tab) => {\n      tab.setAttribute('shape', this.shape);\n      tab.setAttribute('data-breakpoint', this.breakpoint);\n    });\n  }\n\n  /**\n   * Handle keyboard navigation between tabs\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n    const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);\n    \n    if (currentIndex === -1) return;\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    // Focus the button inside the shadow DOM of the tab\n    const targetTab = tabs[newIndex];\n    const button = targetTab.shadowRoot?.querySelector('button');\n    if (button) {\n      button.focus();\n    }\n  }\n\n  render() {\n    const containerClasses = {\n      'tab-bar': true,\n      [`shape-${this.shape}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n    };\n\n    return (\n      <Host role=\"tablist\">\n        <div class={containerClasses}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-BgQvXXuB.js","mappings":";;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAgB,QAAQ;AAEtD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAqB,SAAS;AA6ElE;IA3EC,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;IACK,cAAc,GAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACnB,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;YACrC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC;AACtD,SAAC,CAAC;;AAGJ;;AAEG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;QAC5F,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,QAAQ,CAAC,aAAa,IAAI,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC;QAE3G,IAAI,YAAY,KAAK,EAAE;YAAE;QAEzB,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC1B;AACF,YAAA;gBACE;;;AAIJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC;QAC5D,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE;;;IAIlB,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;SACxC;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab-bar/af-tab-bar.css?tag=af-tab-bar&encapsulation=shadow","src/components/af-tab-bar/af-tab-bar.tsx"],"sourcesContent":["/* TabBar component styles */\n:host {\n  display: block;\n  width: 100%;\n}\n\n.tab-bar {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);\n}\n\n/* Custom scrollbar for WebKit browsers */\n.tab-bar::-webkit-scrollbar {\n  height: 4px;\n}\n\n.tab-bar::-webkit-scrollbar-track {\n  background: var(--af-scrollbar-track, #d1ddda);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb {\n  background: var(--af-scrollbar-thumb, #8a7049);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb:hover {\n  background: var(--af-scrollbar-thumb-hover, #8d785a);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab-bar.shape-square {\n  gap: 0;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab-bar.shape-pill {\n  gap: 0;\n  padding: var(--space-2, 8px);\n  background-color: var(--af-background-level-1, #e8eeed);\n  border-radius: var(--radius-pill, 999px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: MOBILE\n   ========================================================================== */\n\n.tab-bar.breakpoint-mobile {\n  /* Mobile uses compact spacing */\n}\n\n.tab-bar.breakpoint-mobile.shape-square {\n  /* Tabs handle their own padding in mobile */\n}\n\n.tab-bar.breakpoint-mobile.shape-pill {\n  padding: var(--space-1, 4px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: DESKTOP\n   ========================================================================== */\n\n.tab-bar.breakpoint-desktop {\n  /* Desktop uses more generous spacing */\n}\n\n.tab-bar.breakpoint-desktop.shape-square {\n  /* Tabs handle their own padding in desktop mode */\n}\n\n.tab-bar.breakpoint-desktop.shape-pill {\n  padding: var(--space-2, 8px);\n}\n\n","import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' | 'pill';\nexport type TabBarBreakpoint = 'mobile' | 'desktop';\n\n/**\n * TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n *   <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n *   <af-tab label=\"Details\" value=\"details\"></af-tab>\n *   <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n */\n@Component({\n  tag: 'af-tab-bar',\n  styleUrl: 'af-tab-bar.css',\n  shadow: true\n})\nexport class AfTabBar {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual shape variant for all tabs\n   * - `square` - Rectangular tabs with bottom border indicator\n   * - `pill` - Rounded pill tabs with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n  /**\n   * Responsive breakpoint mode\n   * - `mobile` - Compact layout with smaller padding\n   * - `desktop` - Larger layout with more generous spacing\n   */\n  @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n  componentDidLoad() {\n    this.syncChildProps();\n  }\n\n  componentDidUpdate() {\n    this.syncChildProps();\n  }\n\n  /**\n   * Sync shape and breakpoint props to child af-tab elements\n   */\n  private syncChildProps() {\n    const tabs = this.el.querySelectorAll('af-tab');\n    tabs.forEach((tab) => {\n      tab.setAttribute('shape', this.shape);\n      tab.setAttribute('data-breakpoint', this.breakpoint);\n    });\n  }\n\n  /**\n   * Handle keyboard navigation between tabs\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n    const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);\n    \n    if (currentIndex === -1) return;\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    // Focus the button inside the shadow DOM of the tab\n    const targetTab = tabs[newIndex];\n    const button = targetTab.shadowRoot?.querySelector('button');\n    if (button) {\n      button.focus();\n    }\n  }\n\n  render() {\n    const containerClasses = {\n      'tab-bar': true,\n      [`shape-${this.shape}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n    };\n\n    return (\n      <Host role=\"tablist\">\n        <div class={containerClasses}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-Dd_y3e80.js → p-BiSEOBg5.js}

@@ -20,7 +20,7 @@ const AfImage = /*@__PURE__*/ proxyCustomElement(class AfImage extends H {
         this.shape = 'rounded';
     }
     render() {
-        return (h(Host, { key: 'a8954272f3c0defc0b9e33d5f3221c6e1083d927' }, h("div", { key: '2fd3bad5b46360cac57d069031ec2f69103f6542', class: `image-container image-container--${this.shape}` }, h("img", { key: '72a11cde6b65481320d8b6a1d65e85862d4a449e', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '7727e1ac4179e96f8c8928de678136337bd82f44', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: '4f48634e84e032c9a93cf48444709146ffe591b7' }, h("div", { key: 'c26f889afa7c3d35e5f65dcc23d63a41a9c0987e', class: `image-container image-container--${this.shape}` }, h("img", { key: 'c1474197475df3bff2263b509f3abf59a53aa932', src: this.src, alt: this.alt, class: "image" }), h("div", { key: 'bb6e0cae628bf65e423d5986df8ed119af74e699', class: "image-border", "aria-hidden": "true" }))));
     }
     static get style() { return afImageCss; }
 }, [258, "af-image", {
@@ -43,6 +43,6 @@ function defineCustomElement() {
 }
 
 export { AfImage as A, defineCustomElement as d };
-//# sourceMappingURL=p-Dd_y3e80.js.map
+//# sourceMappingURL=p-BiSEOBg5.js.map
 
-//# sourceMappingURL=p-Dd_y3e80.js.map
+//# sourceMappingURL=p-BiSEOBg5.js.map

package/dist/components/{p-Dd_y3e80.js.map → p-BiSEOBg5.js.map}

@@ -1 +1 @@
-{"file":"p-Dd_y3e80.js","mappings":";;AAAA,MAAM,UAAU,GAAG,0vBAA0vB;;MCYhwB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAA4D,SAAS;AAYnF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,iCAAA,EAAoC,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Shape variants — matches Webflow's rounded-edge image treatments */\n.image-container--rounded {\n  border-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-left {\n  border-top-left-radius: var(--radius-md, 12px);\n  border-bottom-left-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-right {\n  border-top-right-radius: var(--radius-md, 12px);\n  border-bottom-right-radius: var(--radius-md, 12px);\n}\n\n.image-container--square {\n  border-radius: 0;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay — inherits the host's border radius via parent clip */\n.image-border {\n  position: absolute;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n  border-radius: inherit;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  /**\n   * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\n   * patterns where only one edge is rounded so the image bleeds into a\n   * neighbouring section.\n   * - `rounded` (default) — symmetric rounded corners on all four sides.\n   * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n   * - `rounded-right` — rounded only on the right edge.\n   * - `square` — no corner rounding.\n   */\n  @Prop() shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square' = 'rounded';\n\n  render() {\n    return (\n      <Host>\n        <div class={`image-container image-container--${this.shape}`}>\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BiSEOBg5.js","mappings":";;AAAA,MAAM,UAAU,GAAG,0vBAA0vB;;MCYhwB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAA4D,SAAS;AAYnF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,iCAAA,EAAoC,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Shape variants — matches Webflow's rounded-edge image treatments */\n.image-container--rounded {\n  border-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-left {\n  border-top-left-radius: var(--radius-md, 12px);\n  border-bottom-left-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-right {\n  border-top-right-radius: var(--radius-md, 12px);\n  border-bottom-right-radius: var(--radius-md, 12px);\n}\n\n.image-container--square {\n  border-radius: 0;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay — inherits the host's border radius via parent clip */\n.image-border {\n  position: absolute;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n  border-radius: inherit;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  /**\n   * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\n   * patterns where only one edge is rounded so the image bleeds into a\n   * neighbouring section.\n   * - `rounded` (default) — symmetric rounded corners on all four sides.\n   * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n   * - `rounded-right` — rounded only on the right edge.\n   * - `square` — no corner rounding.\n   */\n  @Prop() shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square' = 'rounded';\n\n  render() {\n    return (\n      <Host>\n        <div class={`image-container image-container--${this.shape}`}>\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-D1kXpb5A.js → p-BwowgpiS.js}

@@ -22,10 +22,10 @@ const AfProgressLine = /*@__PURE__*/ proxyCustomElement(class AfProgressLine ext
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: 'b09e523a63bdb6ea6084e98e6fb8030840648f27' }, h("div", { key: 'eda92bcf3b0f9d92edfb32299953b984520cc413', class: {
+        return (h(Host, { key: 'f56ae490d0d9e374f540ccb88b0af53430796b42' }, h("div", { key: '20832426b290b5ee44d0507848f1cd4f06973202', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'cf4748fdaf9a5e1f410e4bf16acaf6ebd80a931b', class: "progress-line__background" }), h("div", { key: '3c20e0c290595e97b5e34a6e788297e180494add', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '19623163676a5fd71c7b5ba91b33f53d188647c9', class: "progress-line__background" }), h("div", { key: '0bd6ccd0748930edd43a384bf8ddad55f8c9d07b', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
     static get style() { return afProgressLineCss; }
 }, [258, "af-progress-line", {
@@ -47,6 +47,6 @@ function defineCustomElement() {
 }
 
 export { AfProgressLine as A, defineCustomElement as d };
-//# sourceMappingURL=p-D1kXpb5A.js.map
+//# sourceMappingURL=p-BwowgpiS.js.map
 
-//# sourceMappingURL=p-D1kXpb5A.js.map
+//# sourceMappingURL=p-BwowgpiS.js.map

package/dist/components/{p-D1kXpb5A.js.map → p-BwowgpiS.js.map}

@@ -1 +1 @@
-{"file":"p-D1kXpb5A.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0mBAA0mB;;MCcvnB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAN3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAE5B;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAiB,YAAY;AA4BjD;IA1BC,MAAM,GAAA;;AAEJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC/D,QAAA,MAAM,eAAe,GAAG,eAAe,GAAG,GAAG;QAE7C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AAC7C,aAAA,EACD,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAC3B,eAAA,EAAA,CAAC,mBACD,GAAG,EAAA,EAElB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAG,CAAA,EACzC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,eAAe,CAAG,CAAA,CAAA,EAAE,GACvC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-progress-line/af-progress-line.css?tag=af-progress-line&encapsulation=scoped","src/components/af-progress-line/af-progress-line.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Progress Line Base Styles\n   ========================================================================== */\n\n.progress-line {\n  position: relative;\n  overflow: hidden;\n}\n\n.progress-line--horizontal {\n  height: 3px;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Background Track\n   ========================================================================== */\n\n.progress-line__background {\n  position: absolute;\n  inset: 0;\n  background: var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));\n  height: 1px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* ==========================================================================\n   Active Progress\n   ========================================================================== */\n\n.progress-line__active {\n  position: relative;\n  height: 100%;\n  min-width: 1px;\n  background: var(--af-background-border-active, var(--colour-background-border-active, #8a7049));\n  transition: width 0.15s ease-out;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Progress Line atom component for displaying scroll or completion progress.\n * \n * Shows a horizontal bar with a filled portion indicating progress.\n * Used primarily for carousel scroll indicators.\n */\n@Component({\n  tag: 'af-progress-line',\n  styleUrl: 'af-progress-line.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfProgressLine {\n  /**\n   * Progress value from 0 to 1 (0 = 0%, 1 = 100%).\n   */\n  @Prop() progress: number = 0;\n\n  /**\n   * Orientation of the progress line.\n   * Currently only horizontal is supported.\n   */\n  @Prop() orientation: 'horizontal' = 'horizontal';\n\n  render() {\n    // Clamp progress between 0 and 1\n    const clampedProgress = Math.max(0, Math.min(1, this.progress));\n    const progressPercent = clampedProgress * 100;\n\n    return (\n      <Host>\n        <div\n          class={{\n            'progress-line': true,\n            [`progress-line--${this.orientation}`]: true,\n          }}\n          role=\"progressbar\"\n          aria-valuenow={Math.round(progressPercent)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n        >\n          <div class=\"progress-line__background\" />\n          <div\n            class=\"progress-line__active\"\n            style={{ width: `${progressPercent}%` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-BwowgpiS.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0mBAA0mB;;MCcvnB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAN3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAE5B;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAiB,YAAY;AA4BjD;IA1BC,MAAM,GAAA;;AAEJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC/D,QAAA,MAAM,eAAe,GAAG,eAAe,GAAG,GAAG;QAE7C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AAC7C,aAAA,EACD,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAC3B,eAAA,EAAA,CAAC,mBACD,GAAG,EAAA,EAElB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAG,CAAA,EACzC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,eAAe,CAAG,CAAA,CAAA,EAAE,GACvC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-progress-line/af-progress-line.css?tag=af-progress-line&encapsulation=scoped","src/components/af-progress-line/af-progress-line.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Progress Line Base Styles\n   ========================================================================== */\n\n.progress-line {\n  position: relative;\n  overflow: hidden;\n}\n\n.progress-line--horizontal {\n  height: 3px;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Background Track\n   ========================================================================== */\n\n.progress-line__background {\n  position: absolute;\n  inset: 0;\n  background: var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));\n  height: 1px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* ==========================================================================\n   Active Progress\n   ========================================================================== */\n\n.progress-line__active {\n  position: relative;\n  height: 100%;\n  min-width: 1px;\n  background: var(--af-background-border-active, var(--colour-background-border-active, #8a7049));\n  transition: width 0.15s ease-out;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Progress Line atom component for displaying scroll or completion progress.\n * \n * Shows a horizontal bar with a filled portion indicating progress.\n * Used primarily for carousel scroll indicators.\n */\n@Component({\n  tag: 'af-progress-line',\n  styleUrl: 'af-progress-line.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfProgressLine {\n  /**\n   * Progress value from 0 to 1 (0 = 0%, 1 = 100%).\n   */\n  @Prop() progress: number = 0;\n\n  /**\n   * Orientation of the progress line.\n   * Currently only horizontal is supported.\n   */\n  @Prop() orientation: 'horizontal' = 'horizontal';\n\n  render() {\n    // Clamp progress between 0 and 1\n    const clampedProgress = Math.max(0, Math.min(1, this.progress));\n    const progressPercent = clampedProgress * 100;\n\n    return (\n      <Host>\n        <div\n          class={{\n            'progress-line': true,\n            [`progress-line--${this.orientation}`]: true,\n          }}\n          role=\"progressbar\"\n          aria-valuenow={Math.round(progressPercent)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n        >\n          <div class=\"progress-line__background\" />\n          <div\n            class=\"progress-line__active\"\n            style={{ width: `${progressPercent}%` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-CxQXmlHR.js → p-CNPKZ3ct.js}

@@ -23,7 +23,7 @@ const AfIconBox = /*@__PURE__*/ proxyCustomElement(class AfIconBox extends H {
             [`icon-box--size-${this.size}`]: true,
         };
         const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
-        return (h(Host, { key: 'b224f522fa4db3081cb97fbe88aec0a4f4198d61' }, h("div", { key: '99ee87a2104918c6d3855cc5d7e90dcbda2d9638', class: containerClasses }, h("af-icon", { key: '778170ce3b08ca6b34289cc6bd1d49ade9583bc1', name: this.icon, size: iconSize }))));
+        return (h(Host, { key: '2a0468909e1ec2a92c20b7cda6cb39af8584a42b' }, h("div", { key: '57eaff445b3d6a04c5eb7c39729bfb576866ca07', class: containerClasses }, h("af-icon", { key: '5590e7bd7dea9951f2f647c85240ee6673bcac32', name: this.icon, size: iconSize }))));
     }
     static get style() { return afIconBoxCss; }
 }, [258, "af-icon-box", {
@@ -50,6 +50,6 @@ function defineCustomElement() {
 }
 
 export { AfIconBox as A, defineCustomElement as d };
-//# sourceMappingURL=p-CxQXmlHR.js.map
+//# sourceMappingURL=p-CNPKZ3ct.js.map
 
-//# sourceMappingURL=p-CxQXmlHR.js.map
+//# sourceMappingURL=p-CNPKZ3ct.js.map

package/dist/components/{p-CxQXmlHR.js.map → p-CNPKZ3ct.js.map}

@@ -1 +1 @@
-{"file":"p-CxQXmlHR.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,6lBAA6lB;;MCqBrmB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAYE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,SAAS;AAkBxD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;SACtC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;QAE7E,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAA,CAAY,CAChD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-box/af-icon-box.css?tag=af-icon-box&encapsulation=scoped","src/components/af-icon-box/af-icon-box.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.icon-box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 16px;\n  background-color: var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));\n  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n  flex-shrink: 0;\n}\n\n/* Size variants */\n.icon-box--size-small {\n  width: 48px;\n  height: 48px;\n  padding: 14px;\n  border-radius: 12px;\n}\n\n.icon-box--size-default {\n  width: 64px;\n  height: 64px;\n  padding: 12px;\n  border-radius: 16px;\n}\n\n.icon-box--size-large {\n  width: 80px;\n  height: 80px;\n  padding: 16px;\n  border-radius: 20px;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconBox atom - a themed container for displaying an icon with a rounded background.\n * \n * Inherits theme colors from parent Section via CSS custom properties:\n * - Background uses `--af-background-contrast`\n * - Icon color uses `--af-background-icon-default`\n * \n * @example\n * ```html\n * <af-icon-box icon=\"settings\" size=\"default\"></af-icon-box>\n * ```\n */\n@Component({\n  tag: 'af-icon-box',\n  styleUrl: 'af-icon-box.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconBox {\n  /**\n   * The name of the icon to display (from @affinda/icons)\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Size variant of the icon box\n   * - 'small': 48px container, 20px icon\n   * - 'default': 64px container, 40px icon\n   * - 'large': 80px container, 48px icon\n   */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-box': true,\n      [`icon-box--size-${this.size}`]: true,\n    };\n\n    const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon name={this.icon} size={iconSize}></af-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-CNPKZ3ct.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,6lBAA6lB;;MCqBrmB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAYE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,SAAS;AAkBxD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;SACtC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;QAE7E,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAA,CAAY,CAChD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-box/af-icon-box.css?tag=af-icon-box&encapsulation=scoped","src/components/af-icon-box/af-icon-box.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.icon-box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 16px;\n  background-color: var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));\n  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n  flex-shrink: 0;\n}\n\n/* Size variants */\n.icon-box--size-small {\n  width: 48px;\n  height: 48px;\n  padding: 14px;\n  border-radius: 12px;\n}\n\n.icon-box--size-default {\n  width: 64px;\n  height: 64px;\n  padding: 12px;\n  border-radius: 16px;\n}\n\n.icon-box--size-large {\n  width: 80px;\n  height: 80px;\n  padding: 16px;\n  border-radius: 20px;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconBox atom - a themed container for displaying an icon with a rounded background.\n * \n * Inherits theme colors from parent Section via CSS custom properties:\n * - Background uses `--af-background-contrast`\n * - Icon color uses `--af-background-icon-default`\n * \n * @example\n * ```html\n * <af-icon-box icon=\"settings\" size=\"default\"></af-icon-box>\n * ```\n */\n@Component({\n  tag: 'af-icon-box',\n  styleUrl: 'af-icon-box.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconBox {\n  /**\n   * The name of the icon to display (from @affinda/icons)\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Size variant of the icon box\n   * - 'small': 48px container, 20px icon\n   * - 'default': 64px container, 40px icon\n   * - 'large': 80px container, 48px icon\n   */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-box': true,\n      [`icon-box--size-${this.size}`]: true,\n    };\n\n    const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon name={this.icon} size={iconSize}></af-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-DinivoZj.js → p-CSejCgwa.js}

@@ -57,7 +57,7 @@ const AfTab = /*@__PURE__*/ proxyCustomElement(class AfTab extends H {
             'disabled': this.disabled,
             [`shape-${this.shape}`]: true,
         };
-        return (h(Host, { key: '5127117fc8ffbf1ed62de57af0a3ba569398bd0b' }, h("button", { key: 'e32591d0448724b7ead02702b21c5f31518bf982', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: '2d9756769c9a9442e632faac4710eceb6ec7dcb2', class: "number-slot" }, h("slot", { key: 'fc9b02645ada6c015cbdb07db5d02c7f8fee9320', name: "number" }))), this.displayIcon && (h("span", { key: '8f9ef1b8cec03bea2231a0cc19a91537b84de31f', class: "icon-slot" }, h("slot", { key: '9fae54937c7876df37624aa8928dbfe478bec556', name: "icon" }))), h("span", { key: 'e332be1f9007beb3bed7bc4b74480f0fcacd8a6e', class: "label" }, this.label))));
+        return (h(Host, { key: '9e477df87e7bd6442e9f755d3caaf99e4138c60e' }, h("button", { key: 'b7f4504a1be24fb9db831fbf6ca4da535b7eb200', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: 'd3dbb0dda4a819304ef8a70b34379c6b7fd2d85f', class: "number-slot" }, h("slot", { key: '2a1b2881d7fcd689f3e4e5e4e06407084690966c', name: "number" }))), this.displayIcon && (h("span", { key: 'b07f1d3f8c723ec260cfa4900e51f7581d2f8024', class: "icon-slot" }, h("slot", { key: '6b80404c46e77ab06d3ca24a108fbea231420867', name: "icon" }))), h("span", { key: 'e657d5ffa4938fb85dd165e8679eff694cbb357e', class: "label" }, this.label))));
     }
     static get style() { return afTabCss; }
 }, [257, "af-tab", {
@@ -84,6 +84,6 @@ function defineCustomElement() {
 }
 
 export { AfTab as A, defineCustomElement as d };
-//# sourceMappingURL=p-DinivoZj.js.map
+//# sourceMappingURL=p-CSejCgwa.js.map
 
-//# sourceMappingURL=p-DinivoZj.js.map
+//# sourceMappingURL=p-CSejCgwa.js.map

package/dist/components/{p-DinivoZj.js.map → p-CSejCgwa.js.map}

@@ -1 +1 @@
-{"file":"p-DinivoZj.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,8nGAA8nG;;MC2BloG,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAa,QAAQ;AAEnD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAY9B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC7C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;SAC9B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,aAAa,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACR,EACA,IAAI,CAAC,WAAW,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACf,CACR,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab/af-tab.css?tag=af-tab&encapsulation=shadow","src/components/af-tab/af-tab.tsx"],"sourcesContent":["/* Tab component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-label-button, 17px);\n  line-height: var(--line-height-label-button, 20px);\n  text-align: center;\n  transition: \n    color 0.15s ease,\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease;\n}\n\n.tab:focus {\n  outline: none;\n}\n\n.tab:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, #ffffff),\n    0 0 0 5px var(--af-background-border-active, #8a7049);\n}\n\n/* ==========================================================================\n   SLOTS\n   ========================================================================== */\n\n.icon-slot,\n.number-slot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.number-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  padding: 0 var(--space-3, 12px);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab.shape-square {\n  padding: var(--space-3, 12px);\n  border-radius: 0;\n  overflow: hidden;\n  border-bottom: 3px solid transparent;\n}\n\n/* Square - Default state */\n.tab.shape-square:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  border-bottom-color: var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Square - Hover state */\n.tab.shape-square:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-default, #d1ddda);\n}\n\n/* Square - Active state */\n.tab.shape-square.active {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-active, #8a7049);\n}\n\n/* Square - Disabled state */\n.tab.shape-square.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  border-bottom-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Square - Icon colors */\n.tab.shape-square:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-square.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n  border-radius: var(--radius-pill, 999px);\n  overflow: hidden;\n}\n\n/* Pill - Default state */\n.tab.shape-pill:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  background-color: transparent;\n}\n\n/* Pill - Hover state */\n.tab.shape-pill:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-level-1-hover, #dde6e3);\n}\n\n/* Pill - Active state */\n.tab.shape-pill.active {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-base, #ffffff);\n  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);\n}\n\n/* Pill - Disabled state */\n.tab.shape-pill.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  background-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Pill - Icon colors */\n.tab.shape-pill:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-pill.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   DESKTOP BREAKPOINT ADJUSTMENTS\n   Tabs in desktop mode get larger padding via the tab-bar parent\n   These are applied via CSS custom properties set by af-tab-bar\n   ========================================================================== */\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-square {\n  padding: var(--space-6, 24px) var(--space-5, 20px);\n  border-bottom-width: 4px;\n}\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n *   <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n *   <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n  tag: 'af-tab',\n  styleUrl: 'af-tab.css',\n  shadow: true\n})\nexport class AfTab {\n  /**\n   * The text label for the tab\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Whether the tab is currently active/selected\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Visual shape variant\n   * - `square` - Rectangular tab with bottom border indicator\n   * - `pill` - Rounded pill shape with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabShape = 'square';\n\n  /**\n   * Whether to show the icon slot\n   */\n  @Prop() displayIcon: boolean = false;\n\n  /**\n   * Whether to show the number badge slot\n   */\n  @Prop() displayNumber: boolean = false;\n\n  /**\n   * Unique value for the tab, used for programmatic selection\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the tab is clicked\n   */\n  @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    this.afTabClick.emit({ value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.afTabClick.emit({ value: this.value });\n    }\n  };\n\n  render() {\n    const tabClasses = {\n      'tab': true,\n      'active': this.active,\n      'disabled': this.disabled,\n      [`shape-${this.shape}`]: true,\n    };\n\n    return (\n      <Host>\n        <button\n          class={tabClasses}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n        >\n          {this.displayNumber && (\n            <span class=\"number-slot\">\n              <slot name=\"number\" />\n            </span>\n          )}\n          {this.displayIcon && (\n            <span class=\"icon-slot\">\n              <slot name=\"icon\" />\n            </span>\n          )}\n          <span class=\"label\">{this.label}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-CSejCgwa.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,8nGAA8nG;;MC2BloG,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAa,QAAQ;AAEnD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAY9B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC7C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;SAC9B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,aAAa,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACR,EACA,IAAI,CAAC,WAAW,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACf,CACR,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab/af-tab.css?tag=af-tab&encapsulation=shadow","src/components/af-tab/af-tab.tsx"],"sourcesContent":["/* Tab component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-label-button, 17px);\n  line-height: var(--line-height-label-button, 20px);\n  text-align: center;\n  transition: \n    color 0.15s ease,\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease;\n}\n\n.tab:focus {\n  outline: none;\n}\n\n.tab:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, #ffffff),\n    0 0 0 5px var(--af-background-border-active, #8a7049);\n}\n\n/* ==========================================================================\n   SLOTS\n   ========================================================================== */\n\n.icon-slot,\n.number-slot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.number-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  padding: 0 var(--space-3, 12px);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab.shape-square {\n  padding: var(--space-3, 12px);\n  border-radius: 0;\n  overflow: hidden;\n  border-bottom: 3px solid transparent;\n}\n\n/* Square - Default state */\n.tab.shape-square:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  border-bottom-color: var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Square - Hover state */\n.tab.shape-square:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-default, #d1ddda);\n}\n\n/* Square - Active state */\n.tab.shape-square.active {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-active, #8a7049);\n}\n\n/* Square - Disabled state */\n.tab.shape-square.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  border-bottom-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Square - Icon colors */\n.tab.shape-square:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-square.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n  border-radius: var(--radius-pill, 999px);\n  overflow: hidden;\n}\n\n/* Pill - Default state */\n.tab.shape-pill:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  background-color: transparent;\n}\n\n/* Pill - Hover state */\n.tab.shape-pill:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-level-1-hover, #dde6e3);\n}\n\n/* Pill - Active state */\n.tab.shape-pill.active {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-base, #ffffff);\n  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);\n}\n\n/* Pill - Disabled state */\n.tab.shape-pill.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  background-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Pill - Icon colors */\n.tab.shape-pill:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-pill.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   DESKTOP BREAKPOINT ADJUSTMENTS\n   Tabs in desktop mode get larger padding via the tab-bar parent\n   These are applied via CSS custom properties set by af-tab-bar\n   ========================================================================== */\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-square {\n  padding: var(--space-6, 24px) var(--space-5, 20px);\n  border-bottom-width: 4px;\n}\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n *   <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n *   <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n  tag: 'af-tab',\n  styleUrl: 'af-tab.css',\n  shadow: true\n})\nexport class AfTab {\n  /**\n   * The text label for the tab\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Whether the tab is currently active/selected\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Visual shape variant\n   * - `square` - Rectangular tab with bottom border indicator\n   * - `pill` - Rounded pill shape with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabShape = 'square';\n\n  /**\n   * Whether to show the icon slot\n   */\n  @Prop() displayIcon: boolean = false;\n\n  /**\n   * Whether to show the number badge slot\n   */\n  @Prop() displayNumber: boolean = false;\n\n  /**\n   * Unique value for the tab, used for programmatic selection\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the tab is clicked\n   */\n  @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    this.afTabClick.emit({ value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.afTabClick.emit({ value: this.value });\n    }\n  };\n\n  render() {\n    const tabClasses = {\n      'tab': true,\n      'active': this.active,\n      'disabled': this.disabled,\n      [`shape-${this.shape}`]: true,\n    };\n\n    return (\n      <Host>\n        <button\n          class={tabClasses}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n        >\n          {this.displayNumber && (\n            <span class=\"number-slot\">\n              <slot name=\"number\" />\n            </span>\n          )}\n          {this.displayIcon && (\n            <span class=\"icon-slot\">\n              <slot name=\"icon\" />\n            </span>\n          )}\n          <span class=\"label\">{this.label}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-DNdQkidf.js → p-CTVS7dJ6.js}

@@ -34,7 +34,7 @@ const AfCard = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
             'card': true,
             [`theme-${this.theme}`]: true
         };
-        return (h(Host, { key: '9de4782fbf4c3ad9ad39995ea75e30ee469398b8' }, h("div", { key: '66a94666a4763e287c93da7d64835f305b554a9a', class: classes }, h("div", { key: 'ece7dfdff8e29597ba295f25e88e39f649f16fc0', class: "card__content" }, h("slot", { key: 'e8d4eadcaf2599b3496c07dafe9c4685467624b8' })))));
+        return (h(Host, { key: '8e58ce6e72f8c93f96661f56677a8ac861966e4b' }, h("div", { key: '5ad157ce904665fcd07f847b2851a8c269f04dce', class: classes }, h("div", { key: 'd662a3f05b9779d548a1393ce84ffa9d78be9646', class: "card__content" }, h("slot", { key: 'eb52c38a4b17a88bdabc74a1ebe3a0e9c1ad287c' })))));
     }
     static get style() { return afCardCss; }
 }, [262, "af-card", {
@@ -57,6 +57,6 @@ function defineCustomElement() {
 }
 
 export { AfCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-DNdQkidf.js.map
+//# sourceMappingURL=p-CTVS7dJ6.js.map
 
-//# sourceMappingURL=p-DNdQkidf.js.map
+//# sourceMappingURL=p-CTVS7dJ6.js.map

package/dist/components/{p-DNdQkidf.js.map → p-CTVS7dJ6.js.map}

@@ -1 +1 @@
-{"file":"p-DNdQkidf.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4vHAA4vH;;MCgBjwH,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;;;;;AAMG;AACsB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAkBtD;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;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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   Interactive Mode\n   Opt-in hover lift for cards that are the primary click target. Adds a\n   subtle translateY and shadow on hover; the card is raised, not tinted,\n   so the themed background stays intact.\n   ========================================================================== */\n\n:host([interactive]) .card {\n  transition:\n    transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n  will-change: transform;\n}\n\n:host([interactive]:hover) .card,\n:host([interactive]:focus-within) .card {\n  transform: translateY(-2px);\n  box-shadow: var(--shadow-lift, 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([interactive]) .card {\n    transition-duration: 0.01ms;\n  }\n  :host([interactive]:hover) .card,\n  :host([interactive]:focus-within) .card {\n    transform: none;\n  }\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  /**\n   * When true, the card reacts to pointer hover with a subtle lift\n   * (translateY + shadow). Use for cards that are themselves the primary\n   * click target (e.g. wrapped in an `<a>` or using `onClick`). Purely\n   * cosmetic — does not change focus or click behaviour. Honours\n   * `prefers-reduced-motion: reduce`.\n   */\n  @Prop({ reflect: true }) interactive: 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"],"version":3}
+{"file":"p-CTVS7dJ6.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4vHAA4vH;;MCgBjwH,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;;;;;AAMG;AACsB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAkBtD;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;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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   Interactive Mode\n   Opt-in hover lift for cards that are the primary click target. Adds a\n   subtle translateY and shadow on hover; the card is raised, not tinted,\n   so the themed background stays intact.\n   ========================================================================== */\n\n:host([interactive]) .card {\n  transition:\n    transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n  will-change: transform;\n}\n\n:host([interactive]:hover) .card,\n:host([interactive]:focus-within) .card {\n  transform: translateY(-2px);\n  box-shadow: var(--shadow-lift, 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([interactive]) .card {\n    transition-duration: 0.01ms;\n  }\n  :host([interactive]:hover) .card,\n  :host([interactive]:focus-within) .card {\n    transform: none;\n  }\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  /**\n   * When true, the card reacts to pointer hover with a subtle lift\n   * (translateY + shadow). Use for cards that are themselves the primary\n   * click target (e.g. wrapped in an `<a>` or using `onClick`). Purely\n   * cosmetic — does not change focus or click behaviour. Honours\n   * `prefers-reduced-motion: reduce`.\n   */\n  @Prop({ reflect: true }) interactive: 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"],"version":3}