@affinda/wc 0.4.1 → 0.5.0

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CiY0Twna.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
 
 const afTagCss = ":host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-default{background-color:var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-default:hover{background-color:var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d))}.tag.variant-inkwell{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-brand-white, #ffffff)}.tag.variant-inkwell:hover{background-color:var(--colour-tints-inkwell-500, #1e4a48)}.tag.variant-white{background-color:var(--colour-brand-white, #ffffff);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-white:hover{background-color:var(--colour-tints-mist-green-100, #e1eee1)}.tag.variant-soft-clay{background-color:var(--colour-brand-soft-clay, #b09670);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-soft-clay:hover{background-color:var(--colour-tints-soft-clay-400, #c0ab8d)}.tag.variant-mist-green{background-color:var(--colour-brand-mist-green, #c6d5d1);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-mist-green:hover{background-color:var(--colour-tints-mist-green-200, #d2e8e3)}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow: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))}.tag:focus-visible{outline:none;box-shadow: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))}";
 
@@ -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: '389b869350a0ead31639016403b8bbd86c8be12f' }, h(TagElement, { key: '7be8b372a4c391ae3e426827cf425274dfe3dc44', class: {
+        return (h(Host, { key: '6317b50a0fa62e85bfb9141a6653494cc2b1892d' }, h(TagElement, { key: 'b9b13cf62afe67ccd4aaac53dbc44b736afd0084', class: {
                 'tag': true,
                 [`size-${this.size}`]: true,
                 [`variant-${this.variant}`]: true,
-            }, ...linkProps }, h("slot", { key: 'cf622bef7dca7e64215e0e778f3893097e9e30d0' }))));
+            }, ...linkProps }, h("slot", { key: 'd4f5a9e748fd2a155845c9ad7bd5f414a25f694f' }))));
     }
     static get style() { return afTagCss; }
 }, [257, "af-tag", {
@@ -52,6 +52,6 @@ function defineCustomElement() {
 }
 
 export { AfTag as A, defineCustomElement as d };
-//# sourceMappingURL=p-D6WBvdoZ.js.map
+//# sourceMappingURL=p-CmU4eYJE.js.map
 
-//# sourceMappingURL=p-D6WBvdoZ.js.map
+//# sourceMappingURL=p-CmU4eYJE.js.map

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

@@ -1 +1 @@
-{"file":"p-D6WBvdoZ.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-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}

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

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CiY0Twna.js';
-import { d as defineCustomElement$1 } from './p-DmlCoFGW.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
+import { d as defineCustomElement$1 } from './p-CMatO7AD.js';
 
 const afIconBoxCss = ".sc-af-icon-box-h{display:inline-block}.icon-box.sc-af-icon-box{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background-color:var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));color:var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));flex-shrink:0}.icon-box--size-small.sc-af-icon-box{width:48px;height:48px;padding:14px;border-radius:12px}.icon-box--size-default.sc-af-icon-box{width:64px;height:64px;padding:12px;border-radius:16px}.icon-box--size-large.sc-af-icon-box{width:80px;height:80px;padding:16px;border-radius:20px}";
 
@@ -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: '59cf379ff62d3a5ed7fd7398f240976a023d1f8a' }, h("div", { key: '9fc4e502df8da3cf2112702cd2216a8c7a03a21f', class: containerClasses }, h("af-icon", { key: '8bc89de5589f531829a8377862c7b1bda4c7ce60', name: this.icon, size: iconSize }))));
+        return (h(Host, { key: 'b224f522fa4db3081cb97fbe88aec0a4f4198d61' }, h("div", { key: '99ee87a2104918c6d3855cc5d7e90dcbda2d9638', class: containerClasses }, h("af-icon", { key: '778170ce3b08ca6b34289cc6bd1d49ade9583bc1', 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-gD0WsQqs.js.map
+//# sourceMappingURL=p-CxQXmlHR.js.map
 
-//# sourceMappingURL=p-gD0WsQqs.js.map
+//# sourceMappingURL=p-CxQXmlHR.js.map

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

@@ -1 +1 @@
-{"file":"p-gD0WsQqs.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-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}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CiY0Twna.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
 
 const afProgressLineCss = ".sc-af-progress-line-h{display:block;width:100%}.progress-line.sc-af-progress-line{position:relative;overflow:hidden}.progress-line--horizontal.sc-af-progress-line{height:3px;width:100%}.progress-line__background.sc-af-progress-line{position:absolute;inset:0;background:var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));height:1px;top:50%;transform:translateY(-50%)}.progress-line__active.sc-af-progress-line{position:relative;height:100%;min-width:1px;background:var(--af-background-border-active, var(--colour-background-border-active, #8a7049));transition:width 0.15s ease-out}";
 
@@ -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: '7d8dc150bf0fa9647926d2b6bcf2ff7d37527e46' }, h("div", { key: '5d09009a197599029b15ae3f601c7243ef07f8e3', class: {
+        return (h(Host, { key: 'b09e523a63bdb6ea6084e98e6fb8030840648f27' }, h("div", { key: 'eda92bcf3b0f9d92edfb32299953b984520cc413', 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: '9f861e5aec9f676e2cf2740bd5b83a2c220eec86', class: "progress-line__background" }), h("div", { key: 'bb5457650f19f05435330d429950a3b7f7946fb8', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, 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}%` } }))));
     }
     static get style() { return afProgressLineCss; }
 }, [258, "af-progress-line", {
@@ -47,6 +47,6 @@ function defineCustomElement() {
 }
 
 export { AfProgressLine as A, defineCustomElement as d };
-//# sourceMappingURL=p-uvbCz67Q.js.map
+//# sourceMappingURL=p-D1kXpb5A.js.map
 
-//# sourceMappingURL=p-uvbCz67Q.js.map
+//# sourceMappingURL=p-D1kXpb5A.js.map

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

@@ -1 +1 @@
-{"file":"p-uvbCz67Q.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-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}

package/dist/components/{p-CeBCwjRf.js → p-D5-m35gX.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CiY0Twna.js';
+import { p as proxyCustomElement, H, h } from './p-Btpdr0Bi.js';
 
 const afColorSwatchCss = ":host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}";
 
@@ -39,6 +39,6 @@ function defineCustomElement() {
 }
 
 export { AfColorSwatch as A, defineCustomElement as d };
-//# sourceMappingURL=p-CeBCwjRf.js.map
+//# sourceMappingURL=p-D5-m35gX.js.map
 
-//# sourceMappingURL=p-CeBCwjRf.js.map
+//# sourceMappingURL=p-D5-m35gX.js.map

package/dist/components/{p-CeBCwjRf.js.map → p-D5-m35gX.js.map}

@@ -1 +1 @@
-{"file":"p-CeBCwjRf.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0gBAA0gB;;MCOthB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaU,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAoB9C;IAlBC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACV,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;aACxB,EAAE,IAAI,EAAC,MAAM,EAAA,EACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,EACjC,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CACpD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-color-swatch/af-color-swatch.css?tag=af-color-swatch&encapsulation=shadow","src/components/af-color-swatch/af-color-swatch.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.swatch {\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #ece6f5;\n  background: white;\n}\n\n.color-preview {\n  width: 100%;\n  height: 120px;\n  flex-shrink: 0;\n}\n\n.size-large .color-preview {\n  height: 140px;\n}\n\n.color-info {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.color-name {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  color: #14343B;\n}\n\n.color-value {\n  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;\n  font-size: 14px;\n  color: #708380;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-D5-m35gX.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0gBAA0gB;;MCOthB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaU,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAoB9C;IAlBC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACV,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;aACxB,EAAE,IAAI,EAAC,MAAM,EAAA,EACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,EACjC,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CACpD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-color-swatch/af-color-swatch.css?tag=af-color-swatch&encapsulation=shadow","src/components/af-color-swatch/af-color-swatch.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.swatch {\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #ece6f5;\n  background: white;\n}\n\n.color-preview {\n  width: 100%;\n  height: 120px;\n  flex-shrink: 0;\n}\n\n.size-large .color-preview {\n  height: 140px;\n}\n\n.color-info {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.color-name {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  color: #14343B;\n}\n\n.color-value {\n  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;\n  font-size: 14px;\n  color: #708380;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CdR70Kv1.js → p-DBtE-heu.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CiY0Twna.js';
-import { d as defineCustomElement$2 } from './p-G-vNzZpq.js';
-import { d as defineCustomElement$1 } from './p-CTDelwMf.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
+import { d as defineCustomElement$2 } from './p-DNdQkidf.js';
+import { d as defineCustomElement$1 } from './p-CkaL7yIW.js';
 
 const afIllustratedCardCss = ".sc-af-illustrated-card-h{display:flex;flex-direction:column;width:100%;--af-card-padding:0;--af-card-gap:0}.illustrated-card.sc-af-illustrated-card{min-height:400px}.illustrated-card__content.sc-af-illustrated-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1}.illustrated-card--breakpoint-desktop.illustrated-card--size-default.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 32px 12px 32px}.illustrated-card--breakpoint-desktop.illustrated-card--size-large.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 40px 0 40px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:32px 24px 12px 24px}.illustrated-card__illustration-area.sc-af-illustrated-card{position:relative;width:100%;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.illustrated-card--breakpoint-desktop.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:160px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:192px}.illustrated-card__illustration-placeholder.sc-af-illustrated-card{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center}.illustrated-card__illustration-area.sc-af-illustrated-card-s>img,.illustrated-card__illustration-area .sc-af-illustrated-card-s>img,.illustrated-card__illustration-area.sc-af-illustrated-card img.sc-af-illustrated-card{max-width:100%;max-height:200px;height:auto;object-fit:contain;border-radius:var(--radius-lg, 20px)}.illustrated-card.sc-af-illustrated-card af-typography-lockup.sc-af-illustrated-card{--colour-typography-heading-primary:var(--af-typography-heading-primary);--colour-typography-body-default:var(--af-typography-body-default)}";
 
@@ -30,7 +30,7 @@ const AfIllustratedCard = /*@__PURE__*/ proxyCustomElement(class AfIllustratedCa
             [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
             [`illustrated-card--size-${this.cardSize}`]: true,
         };
-        return (h(Host, { key: 'ef2bef2685ff1c476d6cdffcac8dba7d8bb0f9e9' }, h("div", { key: '7a9fab8ac214d2715b2f96186e4cbb2978b53137', class: wrapperClasses }, h("af-card", { key: '9967cb01f648bb29b33743d50f733c21883ae6fd', theme: this.theme }, h("div", { key: 'eb791121145c80101fdb5109636a990de735074f', class: "illustrated-card__content" }, h("af-typography-lockup", { key: 'f5f39cc0cfa368df8cd8f44b4f259af6dcf25fdb', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, h("slot", { key: '0ed9b6ef9c8af21b239d505bd4a55f19d6aff418' }), h("span", { key: '1e7af14cfbd40cedf7c4cacc67d0232560ca6a18', slot: "description" }, h("slot", { key: '1a63ad36fd61d5140201c0d62a37e36dad5470a3', name: "body" })), h("span", { key: '9fe3673d3aee02dae3f2d541a332a68e37794427', slot: "buttons" }, h("slot", { key: '932d6a3ca09ef215818dfca3353ceca2764b3ac2', name: "buttons" })))), h("div", { key: 'ceb3132f1986c70766e897aad8c71b155eb3d84e', class: "illustrated-card__illustration-area" }, h("slot", { key: '1b2456a9b4a87823832555b0836381336e44ee83', name: "illustration" }))))));
+        return (h(Host, { key: '6cfa00ec3678220a5cb65c47c2a6dd120a8c5553' }, h("div", { key: '0b2fe8e581ead66d4f87007effce17bc506acb90', class: wrapperClasses }, h("af-card", { key: '7c9b545d3dd1960c43a6913ed28beb7f061c31e7', theme: this.theme }, h("div", { key: 'cfe8a3385853a6affefc77f18f5625f292f10489', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '38e539b8617502fdd4ae2ebd6e1e536cf502b9a1', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, h("slot", { key: '8988255edefe50349f78fe45db72c584ba6378ef' }), h("span", { key: '769cbdd181f166b086974e21a7f941dd4e17add0', slot: "description" }, h("slot", { key: 'ac1793bf3c0cc8e1a5d1ce9b2958a4e320b81134', name: "body" })), h("span", { key: 'ef22764670352f88d7e647b44625ac1afa94d51f', slot: "buttons" }, h("slot", { key: '625f23188a6cd9914b67b1c9937c728bc7125f4f', name: "buttons" })))), h("div", { key: '0616a426ea07da6c92488c65d85ba3c3ab84c40b', class: "illustrated-card__illustration-area" }, h("slot", { key: 'cf2998e62fb20f3cd049e0640004322a0b438ac1', name: "illustration" }))))));
     }
     static get style() { return afIllustratedCardCss; }
 }, [262, "af-illustrated-card", {
@@ -63,6 +63,6 @@ function defineCustomElement() {
 }
 
 export { AfIllustratedCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-CdR70Kv1.js.map
+//# sourceMappingURL=p-DBtE-heu.js.map
 
-//# sourceMappingURL=p-CdR70Kv1.js.map
+//# sourceMappingURL=p-DBtE-heu.js.map

package/dist/components/{p-CdR70Kv1.js.map → p-DBtE-heu.js.map}

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

package/dist/components/{p--aWqZ9H9.js → p-DMXuAjLo.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CiY0Twna.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
 
 const afNavItemCss = ".sc-af-nav-item-h{display:inline-block}[breakpoint=\"mobile\"].sc-af-nav-item-h{display:block;width:100%}.nav-link.sc-af-nav-item{text-decoration:none;color:inherit;display:block}.nav-item.sc-af-nav-item{display:flex;align-items:center;gap:8px;box-sizing:border-box;cursor:pointer}.hierarchy-primary.sc-af-nav-item{padding:12px;justify-content:center}.hierarchy-primary.sc-af-nav-item .label-container.sc-af-nav-item{display:flex;align-items:center;justify-content:center;height:24px;gap:10px}.hierarchy-primary.variant-01.sc-af-nav-item{font-family:var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-size:16px;font-weight:var(--font-weight-book, 500);line-height:20px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.hierarchy-primary.variant-01.sc-af-nav-item .label-container.sc-af-nav-item{border-bottom:1px solid transparent}.hierarchy-primary.variant-02.sc-af-nav-item{font-family:var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);font-size:16px;font-weight:var(--font-weight-regular, 400);line-height:20px;color:var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))}.hierarchy-primary.variant-01.sc-af-nav-item:hover .label-container.sc-af-nav-item{border-bottom-color:currentColor}.hierarchy-primary.variant-01.active.sc-af-nav-item .label-container.sc-af-nav-item{border-bottom:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));margin-bottom:-1px}.hierarchy-primary.variant-02.sc-af-nav-item:hover{background-color:rgba(20, 52, 59, 0.04);border-radius:8px}.hierarchy-primary.variant-02.active.sc-af-nav-item{background-color:rgba(20, 52, 59, 0.08);border-radius:8px}.hierarchy-secondary.sc-af-nav-item{padding:4px 0}.hierarchy-secondary.sc-af-nav-item .label-container.sc-af-nav-item{display:flex;align-items:center;flex:1;min-height:24px;gap:10px}.hierarchy-secondary.variant-01.sc-af-nav-item{font-family:var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-size:14px;font-weight:500;line-height:20px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.hierarchy-secondary.variant-02.sc-af-nav-item{font-family:var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-size:14px;font-weight:400;line-height:20px;color:var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))}.hierarchy-secondary.sc-af-nav-item:hover .label-container.sc-af-nav-item{text-decoration:underline}.nav-item.sc-af-nav-item:focus-within{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:2px;border-radius:4px}.nav-link.sc-af-nav-item:focus{outline:none}.nav-link.sc-af-nav-item:focus-visible+.nav-item.sc-af-nav-item,.sc-af-nav-item-h:focus-visible .nav-item.sc-af-nav-item{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:2px;border-radius:4px}.hierarchy-primary.breakpoint-mobile.sc-af-nav-item{padding:20px 12px;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));width:100%;justify-content:flex-start}.hierarchy-primary.breakpoint-mobile.sc-af-nav-item .label-container.sc-af-nav-item{flex:1;justify-content:flex-start}.hierarchy-primary.variant-01.breakpoint-mobile.sc-af-nav-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.hierarchy-primary.variant-02.breakpoint-mobile.sc-af-nav-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b))}.hierarchy-secondary.breakpoint-mobile.sc-af-nav-item{padding:2px 0;height:40px}.hierarchy-secondary.breakpoint-mobile.sc-af-nav-item .label-container.sc-af-nav-item{min-height:24px}.hierarchy-primary.breakpoint-mobile.variant-01.sc-af-nav-item .label-container.sc-af-nav-item{border-bottom-color:transparent}.hierarchy-primary.breakpoint-mobile.variant-01.sc-af-nav-item:hover .label-container.sc-af-nav-item{border-bottom-color:transparent}.hierarchy-primary.breakpoint-mobile.variant-01.active.sc-af-nav-item .label-container.sc-af-nav-item{border-bottom-color:transparent;margin-bottom:0}.sc-af-nav-item-s>[slot=\"icon-left\"],.sc-af-nav-item-s>[slot=\"icon-right\"]{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease}.hierarchy-primary.variant-01.sc-af-nav-item-s>[slot=\"icon-left\"],.hierarchy-primary.variant-01 .sc-af-nav-item-s>[slot=\"icon-left\"],.hierarchy-primary.variant-01.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.variant-01 .sc-af-nav-item-s>[slot=\"icon-right\"]{color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.hierarchy-primary.variant-02.sc-af-nav-item-s>[slot=\"icon-left\"],.hierarchy-primary.variant-02 .sc-af-nav-item-s>[slot=\"icon-left\"],.hierarchy-primary.variant-02.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.variant-02 .sc-af-nav-item-s>[slot=\"icon-right\"]{color:var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))}.hierarchy-primary.breakpoint-mobile.active.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.breakpoint-mobile.active .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:rotate(180deg)}.hierarchy-secondary.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-secondary .sc-af-nav-item-s>[slot=\"icon-right\"]{width:20px;height:20px}.hierarchy-secondary.variant-01.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-secondary.variant-01 .sc-af-nav-item-s>[slot=\"icon-right\"]{color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.hierarchy-secondary.variant-02.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-secondary.variant-02 .sc-af-nav-item-s>[slot=\"icon-right\"]{color:var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))}@media (max-width: 1023px){[breakpoint=\"auto\"].sc-af-nav-item-h .hierarchy-primary.sc-af-nav-item,.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.sc-af-nav-item{padding:20px 12px;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));width:100%}[breakpoint=\"auto\"].sc-af-nav-item-h .hierarchy-primary.sc-af-nav-item .label-container.sc-af-nav-item,.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.sc-af-nav-item .label-container.sc-af-nav-item{flex:1;justify-content:flex-start}[breakpoint=\"auto\"].sc-af-nav-item-h .hierarchy-primary.variant-01.sc-af-nav-item,.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.variant-01.sc-af-nav-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}[breakpoint=\"auto\"].sc-af-nav-item-h .hierarchy-primary.variant-02.sc-af-nav-item,.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.variant-02.sc-af-nav-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b))}.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary.active.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary.active .sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.active.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.active .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:rotate(180deg)}.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary:hover .sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary:hover .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:none}.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary.active:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary.active:hover .sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.active:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.active:hover .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:rotate(180deg)}}";
 
@@ -88,6 +88,6 @@ function defineCustomElement() {
 }
 
 export { AfNavItem as A, defineCustomElement as d };
-//# sourceMappingURL=p--aWqZ9H9.js.map
+//# sourceMappingURL=p-DMXuAjLo.js.map
 
-//# sourceMappingURL=p--aWqZ9H9.js.map
+//# sourceMappingURL=p-DMXuAjLo.js.map

package/dist/components/{p--aWqZ9H9.js.map → p-DMXuAjLo.js.map}

@@ -1 +1 @@
-{"file":"p--aWqZ9H9.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qiQAAqiQ;;MCmB7iQ,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AASE;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAA4B,SAAS;AAEtD;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,IAAI;AAEnC;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAOrE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/B;;;;AAIG;AACK,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAAoB,KAAI;AACtD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;gBAC1E,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;AAEnB,SAAC;AAgDF;IA9CC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;YACvC,QAAQ,EAAE,IAAI,CAAC,MAAM;SACtB;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA;AAC9B,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT;YACN,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,YAAY,EAAQ,CAAA;SAChC;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAAG,YAAY,CAAO,CACvC,CACC;;QAIX,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC;QAC/D,IAAI,iBAAiB,EAAE;AACrB,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EAAA,eAAA,EACG,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,oBAAoB,IAEnC,YAAY,CACT,CACD;;AAIX,QAAA,OAAO,CAAA,CAAC,IAAI,EAAA,IAAA,EAAE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAG,EAAA,YAAY,CAAO,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=scoped","src/components/af-nav-item/af-nav-item.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Mobile breakpoint - full width block display */\n:host([breakpoint=\"mobile\"]) {\n  display: block;\n  width: 100%;\n}\n\n.nav-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n.nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n/* Primary hierarchy - bold main navigation */\n.hierarchy-primary {\n  padding: 12px;\n  justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  gap: 10px;\n}\n\n/* Primary variant 01 - darker */\n.hierarchy-primary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-book, 500);\n  line-height: 20px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Add transparent border to prevent layout shift on hover */\n.hierarchy-primary.variant-01 .label-container {\n  border-bottom: 1px solid transparent;\n}\n\n/* Primary variant 02 - lighter for light backgrounds */\n.hierarchy-primary.variant-02 {\n  font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 20px;\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Hover state for primary variant-01 - show underline */\n.hierarchy-primary.variant-01:hover .label-container {\n  border-bottom-color: currentColor;\n}\n\n/* Active state for primary variant-01 - thicker border */\n.hierarchy-primary.variant-01.active .label-container {\n  border-bottom: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  /* Adjust margin to prevent shift from 1px to 2px border */\n  margin-bottom: -1px;\n}\n\n/* Hover and active states for variant-02 (light backgrounds) - no border */\n.hierarchy-primary.variant-02:hover {\n  background-color: rgba(20, 52, 59, 0.04);\n  border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n  background-color: rgba(20, 52, 59, 0.08);\n  border-radius: 8px;\n}\n\n/* Secondary hierarchy - smaller sub-navigation */\n.hierarchy-secondary {\n  padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-height: 24px;\n  gap: 10px;\n}\n\n/* Secondary variant 01 - medium weight */\n.hierarchy-secondary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Secondary variant 02 - regular weight */\n.hierarchy-secondary.variant-02 {\n  font-family: var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Hover state for secondary - underline text */\n.hierarchy-secondary:hover .label-container {\n  text-decoration: underline;\n}\n\n/* Focus states for accessibility */\n.nav-item:focus-within {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Remove default focus outline on link */\n.nav-link:focus {\n  outline: none;\n}\n\n.nav-link:focus-visible + .nav-item,\n:host(:focus-visible) .nav-item {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Mobile breakpoint styles - explicit via prop */\n.hierarchy-primary.breakpoint-mobile {\n  padding: 20px 12px;\n  border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n  width: 100%;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.breakpoint-mobile .label-container {\n  flex: 1;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.variant-01.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n}\n\n.hierarchy-primary.variant-02.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n  color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Mobile breakpoint for secondary hierarchy */\n.hierarchy-secondary.breakpoint-mobile {\n  padding: 2px 0;\n  height: 40px;\n}\n\n.hierarchy-secondary.breakpoint-mobile .label-container {\n  min-height: 24px;\n}\n\n/* Mobile removes the hover underline effect */\n.hierarchy-primary.breakpoint-mobile.variant-01 .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01:hover .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01.active .label-container {\n  border-bottom-color: transparent;\n  margin-bottom: 0;\n}\n\n/* Icon sizing and styling */\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n/* Icon color inheritance for primary hierarchy */\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Icon rotation on active for mobile primary with dropdown indicator.\n   Desktop chevrons stay static — rotating on hover/active felt fidgety\n   and the open/closed state is already clear from the dropdown panel. */\n.hierarchy-primary.breakpoint-mobile.active ::slotted([slot=\"icon-right\"]) {\n  transform: rotate(180deg);\n}\n\n/* Secondary hierarchy - smaller icons */\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon color inheritance for secondary hierarchy */\n.hierarchy-secondary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-secondary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Fallback media query for when breakpoint prop is not set */\n/* ≤ tablet */\n@media (max-width: 1023px) {\n  :host([breakpoint=\"auto\"]) .hierarchy-primary,\n  :host(:not([breakpoint])) .hierarchy-primary {\n    padding: 20px 12px;\n    border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n    width: 100%;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary .label-container,\n  :host(:not([breakpoint])) .hierarchy-primary .label-container {\n    flex: 1;\n    justify-content: flex-start;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-01,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-01 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-02,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-02 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n    color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n  }\n\n  /* Icon rotation on active for auto/responsive breakpoint */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n\n  /* Disable desktop hover rotation in mobile view */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]) {\n    transform: none;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n}\n","import { Component, Element, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n *\n * **Dropdown trigger a11y:** when the host carries a `data-dropdown=\"id\"`\n * attribute and has no `href`, the inner wrapper is promoted to\n * `role=\"button\"` with `tabindex=\"0\"` and keyboard activation (Enter/Space),\n * so keyboard users can open the matching dropdown panel just like a\n * pointer click. The companion `af-navbar` keeps `aria-expanded` on the\n * host in sync with the active dropdown.\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles\n   * - 'mobile': Mobile-specific styles (larger text, different spacing)\n   */\n  @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  /**\n   * Promote Enter and Space on a focused trigger into a synthetic click\n   * so the surrounding af-navbar (which listens on click) treats the\n   * keyboard activation identically to a pointer click.\n   */\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      this.el.click();\n    }\n  };\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'active': this.active,\n    };\n\n    const innerContent = [\n      <slot name=\"icon-left\"></slot>,\n      <div class=\"label-container\">\n        <slot></slot>\n      </div>,\n      <slot name=\"icon-right\"></slot>,\n    ];\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            <div class={classes}>{innerContent}</div>\n          </a>\n        </Host>\n      );\n    }\n\n    const isDropdownTrigger = this.el.hasAttribute('data-dropdown');\n    if (isDropdownTrigger) {\n      return (\n        <Host>\n          <div\n            class={classes}\n            role=\"button\"\n            tabindex={0}\n            aria-haspopup=\"menu\"\n            onKeyDown={this.handleTriggerKeyDown}\n          >\n            {innerContent}\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host>{<div class={classes}>{innerContent}</div>}</Host>;\n  }\n}\n"],"version":3}
+{"file":"p-DMXuAjLo.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qiQAAqiQ;;MCmB7iQ,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AASE;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAA4B,SAAS;AAEtD;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,IAAI;AAEnC;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAOrE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/B;;;;AAIG;AACK,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAAoB,KAAI;AACtD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;gBAC1E,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;AAEnB,SAAC;AAgDF;IA9CC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;YACvC,QAAQ,EAAE,IAAI,CAAC,MAAM;SACtB;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA;AAC9B,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT;YACN,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,YAAY,EAAQ,CAAA;SAChC;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAAG,YAAY,CAAO,CACvC,CACC;;QAIX,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC;QAC/D,IAAI,iBAAiB,EAAE;AACrB,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EAAA,eAAA,EACG,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,oBAAoB,IAEnC,YAAY,CACT,CACD;;AAIX,QAAA,OAAO,CAAA,CAAC,IAAI,EAAA,IAAA,EAAE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAG,EAAA,YAAY,CAAO,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=scoped","src/components/af-nav-item/af-nav-item.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Mobile breakpoint - full width block display */\n:host([breakpoint=\"mobile\"]) {\n  display: block;\n  width: 100%;\n}\n\n.nav-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n.nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n/* Primary hierarchy - bold main navigation */\n.hierarchy-primary {\n  padding: 12px;\n  justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  gap: 10px;\n}\n\n/* Primary variant 01 - darker */\n.hierarchy-primary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-book, 500);\n  line-height: 20px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Add transparent border to prevent layout shift on hover */\n.hierarchy-primary.variant-01 .label-container {\n  border-bottom: 1px solid transparent;\n}\n\n/* Primary variant 02 - lighter for light backgrounds */\n.hierarchy-primary.variant-02 {\n  font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 20px;\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Hover state for primary variant-01 - show underline */\n.hierarchy-primary.variant-01:hover .label-container {\n  border-bottom-color: currentColor;\n}\n\n/* Active state for primary variant-01 - thicker border */\n.hierarchy-primary.variant-01.active .label-container {\n  border-bottom: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  /* Adjust margin to prevent shift from 1px to 2px border */\n  margin-bottom: -1px;\n}\n\n/* Hover and active states for variant-02 (light backgrounds) - no border */\n.hierarchy-primary.variant-02:hover {\n  background-color: rgba(20, 52, 59, 0.04);\n  border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n  background-color: rgba(20, 52, 59, 0.08);\n  border-radius: 8px;\n}\n\n/* Secondary hierarchy - smaller sub-navigation */\n.hierarchy-secondary {\n  padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-height: 24px;\n  gap: 10px;\n}\n\n/* Secondary variant 01 - medium weight */\n.hierarchy-secondary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Secondary variant 02 - regular weight */\n.hierarchy-secondary.variant-02 {\n  font-family: var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Hover state for secondary - underline text */\n.hierarchy-secondary:hover .label-container {\n  text-decoration: underline;\n}\n\n/* Focus states for accessibility */\n.nav-item:focus-within {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Remove default focus outline on link */\n.nav-link:focus {\n  outline: none;\n}\n\n.nav-link:focus-visible + .nav-item,\n:host(:focus-visible) .nav-item {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Mobile breakpoint styles - explicit via prop */\n.hierarchy-primary.breakpoint-mobile {\n  padding: 20px 12px;\n  border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n  width: 100%;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.breakpoint-mobile .label-container {\n  flex: 1;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.variant-01.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n}\n\n.hierarchy-primary.variant-02.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n  color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Mobile breakpoint for secondary hierarchy */\n.hierarchy-secondary.breakpoint-mobile {\n  padding: 2px 0;\n  height: 40px;\n}\n\n.hierarchy-secondary.breakpoint-mobile .label-container {\n  min-height: 24px;\n}\n\n/* Mobile removes the hover underline effect */\n.hierarchy-primary.breakpoint-mobile.variant-01 .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01:hover .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01.active .label-container {\n  border-bottom-color: transparent;\n  margin-bottom: 0;\n}\n\n/* Icon sizing and styling */\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n/* Icon color inheritance for primary hierarchy */\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Icon rotation on active for mobile primary with dropdown indicator.\n   Desktop chevrons stay static — rotating on hover/active felt fidgety\n   and the open/closed state is already clear from the dropdown panel. */\n.hierarchy-primary.breakpoint-mobile.active ::slotted([slot=\"icon-right\"]) {\n  transform: rotate(180deg);\n}\n\n/* Secondary hierarchy - smaller icons */\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon color inheritance for secondary hierarchy */\n.hierarchy-secondary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-secondary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Fallback media query for when breakpoint prop is not set */\n/* ≤ tablet */\n@media (max-width: 1023px) {\n  :host([breakpoint=\"auto\"]) .hierarchy-primary,\n  :host(:not([breakpoint])) .hierarchy-primary {\n    padding: 20px 12px;\n    border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n    width: 100%;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary .label-container,\n  :host(:not([breakpoint])) .hierarchy-primary .label-container {\n    flex: 1;\n    justify-content: flex-start;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-01,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-01 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-02,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-02 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n    color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n  }\n\n  /* Icon rotation on active for auto/responsive breakpoint */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n\n  /* Disable desktop hover rotation in mobile view */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]) {\n    transform: none;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n}\n","import { Component, Element, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n *\n * **Dropdown trigger a11y:** when the host carries a `data-dropdown=\"id\"`\n * attribute and has no `href`, the inner wrapper is promoted to\n * `role=\"button\"` with `tabindex=\"0\"` and keyboard activation (Enter/Space),\n * so keyboard users can open the matching dropdown panel just like a\n * pointer click. The companion `af-navbar` keeps `aria-expanded` on the\n * host in sync with the active dropdown.\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles\n   * - 'mobile': Mobile-specific styles (larger text, different spacing)\n   */\n  @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  /**\n   * Promote Enter and Space on a focused trigger into a synthetic click\n   * so the surrounding af-navbar (which listens on click) treats the\n   * keyboard activation identically to a pointer click.\n   */\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      this.el.click();\n    }\n  };\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'active': this.active,\n    };\n\n    const innerContent = [\n      <slot name=\"icon-left\"></slot>,\n      <div class=\"label-container\">\n        <slot></slot>\n      </div>,\n      <slot name=\"icon-right\"></slot>,\n    ];\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            <div class={classes}>{innerContent}</div>\n          </a>\n        </Host>\n      );\n    }\n\n    const isDropdownTrigger = this.el.hasAttribute('data-dropdown');\n    if (isDropdownTrigger) {\n      return (\n        <Host>\n          <div\n            class={classes}\n            role=\"button\"\n            tabindex={0}\n            aria-haspopup=\"menu\"\n            onKeyDown={this.handleTriggerKeyDown}\n          >\n            {innerContent}\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host>{<div class={classes}>{innerContent}</div>}</Host>;\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CiY0Twna.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
 
 const afCardCss = ".sc-af-card-h{display:block;width:100%}[stretch].sc-af-card-h{display:flex;flex-direction:column;height:100%}[stretch].sc-af-card-h .card.sc-af-card{flex:1 1 auto}[stretch].sc-af-card-h .card__content.sc-af-card{flex:1 1 auto}.card.sc-af-card{border-radius:var(--af-card-radius, var(--radius-lg, 20px));overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box}[interactive].sc-af-card-h .card.sc-af-card{transition: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));will-change:transform}[interactive].sc-af-card-h:hover .card.sc-af-card,[interactive].sc-af-card-h:focus-within .card.sc-af-card{transform:translateY(-2px);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))}@media (prefers-reduced-motion: reduce){[interactive].sc-af-card-h .card.sc-af-card{transition-duration:0.01ms}[interactive].sc-af-card-h:hover .card.sc-af-card,[interactive].sc-af-card-h:focus-within .card.sc-af-card{transform:none}}.card.theme-white.sc-af-card{background-color:var(--colour-brand-white, #ffffff);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed)}.card.theme-white-ivory.sc-af-card{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-ivory-200, #ffefcc)}.card.theme-inkwell.sc-af-card{background-color:var(--colour-brand-inkwell, #14343b);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.card.theme-mist-green.sc-af-card{background-color:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3)}.card.theme-soft-clay.sc-af-card{background-color:var(--colour-softclay-400, #c0ab8d);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-softclay-500, #b09670)}.card__content.sc-af-card{position:relative;padding:var(--af-card-padding, 40px);display:flex;flex-direction:column;gap:var(--af-card-gap, 24px);flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}";
 
@@ -34,7 +34,7 @@ const AfCard = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
             'card': true,
             [`theme-${this.theme}`]: true
         };
-        return (h(Host, { key: '04dac55d2132d2f5cd096fa63c454ba273e09042' }, h("div", { key: '8bccd727f37b90e4e0652dfe00929c8f4a454c92', class: classes }, h("div", { key: 'a797a78d16dc7a32a53113f4cd8a164baa8e919b', class: "card__content" }, h("slot", { key: '04f40c7c79299d7c6c27f3c7c44c64aab6f7ae03' })))));
+        return (h(Host, { key: '9de4782fbf4c3ad9ad39995ea75e30ee469398b8' }, h("div", { key: '66a94666a4763e287c93da7d64835f305b554a9a', class: classes }, h("div", { key: 'ece7dfdff8e29597ba295f25e88e39f649f16fc0', class: "card__content" }, h("slot", { key: 'e8d4eadcaf2599b3496c07dafe9c4685467624b8' })))));
     }
     static get style() { return afCardCss; }
 }, [262, "af-card", {
@@ -57,6 +57,6 @@ function defineCustomElement() {
 }
 
 export { AfCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-G-vNzZpq.js.map
+//# sourceMappingURL=p-DNdQkidf.js.map
 
-//# sourceMappingURL=p-G-vNzZpq.js.map
+//# sourceMappingURL=p-DNdQkidf.js.map

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

@@ -1 +1 @@
-{"file":"p-G-vNzZpq.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-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}

package/dist/components/{p-PKWusChD.js → p-DOZPKyww.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CiY0Twna.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-Btpdr0Bi.js';
 
 const afInputCss = ":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.input-container{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;min-height:48px;box-sizing:border-box}.input-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.input-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.input-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.input-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.search-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-icon, var(--af-background-icon-default, #14343b))}.search-icon svg{width:20px;height:20px}.disabled .search-icon{opacity:0.5}.input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none}.input::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.input:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input[type=\"search\"]::-webkit-search-decoration,.input[type=\"search\"]::-webkit-search-cancel-button,.input[type=\"search\"]::-webkit-search-results-button,.input[type=\"search\"]::-webkit-search-results-decoration{display:none}.input[type=\"number\"]::-webkit-inner-spin-button,.input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=\"number\"]{-moz-appearance:textfield}.clear-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0;opacity:0.6;transition:opacity 0.15s ease}.clear-button svg{width:16px;height:16px}.clear-button:hover{opacity:1}.clear-button:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";
 
@@ -97,7 +97,7 @@ const AfInput = /*@__PURE__*/ proxyCustomElement(class AfInput extends H {
             'focused': this.isFocused,
             'hovered': this.isHovered && !this.disabled && !this.isFocused
         };
-        return (h(Host, { key: '9a522c670151a1516a44adee5dbde584fb3c14c9' }, h("div", { key: 'a8c11791541fc36ea5a031bee264dbb8c7ac70b5', class: wrapperClasses }, this.label && (h("div", { key: '3b39ad4f6a95993a3dbd15705700ee3be8ee486e', class: "label-row" }, h("label", { key: 'dedb511f764b297bb9369371e87232c5e9df844c', class: "label", htmlFor: "input" }, this.label, this.required && h("span", { key: 'fa84af21fde73e3f6039a0f424e4732ae6864d01', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '168782ec2bfedc885e116b6a35f6c4754ca4e365', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '63dbaa4cf9cad54d265cc825d55d8a1c61730daa', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0b8282a44bbcab40475cba2414c823cd95aed951', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '73738a35aac3f342da51e35603dc4a6904e8dcd9', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'f1e6842fe546be8cf91c09cb8cf689d81bf37c17', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '1834dcd2859cf2109a4c2a7da7ac51350c0aa9af', name: "label-end" }))), this.description && (h("p", { key: '9395611a3534716fe12084c50316a39574c3f776', class: "description" }, this.description)), h("div", { key: '3001d7d3978cf3fc77b67218ea2e65c50776279d', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearchIcon && (h("span", { key: 'ba8cbed367435a826b527c8d90e9ae3a3c7c71f3', class: "search-icon" }, h("svg", { key: 'f1b270e8150cf316f245aef92d487bdc713d064c', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b9af43201dc60c25de4432ed9375f285aed47ec9', d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'ab3781c2490f2be9eb30efabd6337733ffd5c3c2', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: '9906b9e2d156ba550d06ab81216b229b3d419e55', ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: 'd111e6b281155b4e2c5f246e6cc64beabe76964c', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, h("svg", { key: '7407dd87396fb727fe4a59f2064d388415217940', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0ba0ff91cd2bfd858d70d09aa3d095a9451c3e2b', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'e4d5d312ccaa5eb15ee96c472b578267fa47372b', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (h("div", { key: '8405822d377b18ae21d35be6bd31a6ac825f4c00', class: "error-row", id: "error-message" }, h("span", { key: '95470e89406d542f6d1b9c8ec82801be59a93cf0', class: "error-icon" }, h("svg", { key: '6cb6f912402c5430de050ef9de49f09ed090a7f6', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '167db09d25a30fd1722f392b6b2581e270550e45', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '09c07b746d9fe73c0738a430699d3275566e6eec', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '1c3bc5389ee09827dce8253c850f39f86702abce', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: 'e310d4184654e7e8d4cad099c4dd8c247e674ba0', class: "error-text" }, this.error))))));
+        return (h(Host, { key: '5bf8980e12ad5fc3b8b84df3acc749bddf61042d' }, h("div", { key: 'd0266eca85871397ed73381ca3d36f3dc2dd79ce', class: wrapperClasses }, this.label && (h("div", { key: 'f9fc2fe3f52a1f9be1404943d91489357ea941dc', class: "label-row" }, h("label", { key: '76283a7f0c9be127aa8c9115fcbc26b2d67d51cc', class: "label", htmlFor: "input" }, this.label, this.required && h("span", { key: '6b0de23e857abfdd25d6eefaa6ff22f22fa813dd', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '7c5f7a47a8357301f3fe28d6078bdec3ec1160c3', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '655c9448589937c2047a58962f78ab1872e0da84', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5066c29389ac8f9e1e27771f43a98f75f9b03634', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '1993da070066d33575618267d6af5b13b641143b', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'dd99ac12d4a23b98c98fca1df34916968276fc0e', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'b406de5a455af79a69497c6a641b5c41347ee1ab', name: "label-end" }))), this.description && (h("p", { key: '0dcebb186df7055efb168f96ad4199e2f614a87c', class: "description" }, this.description)), h("div", { key: '754b8a3e67d5807d7d484d475d31913dee8004f4', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearchIcon && (h("span", { key: '5757962a3479a6cd1f12bd1da183919af69ad9f4', class: "search-icon" }, h("svg", { key: '4106175e5b41e4c978b38eda6db36799a6a6f762', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1d54b9a8c682c9049e97b28143f0dcd90e068dee', d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'd3ed0187abde8c14eae462612c918e10cb46916d', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: 'fb7a551d44282686732b78865bab8720c5e08830', ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '6ad41a3ee4ffdbeefa11e45754a22143b33405e5', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, h("svg", { key: '129f73660030e81ff17071fae51bb34af23eca57', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '78d4c71521ac7daced7023c5bcfb2bfccf593fab', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '4eb85452029e8347dd648dcc849fa000b41b7fea', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (h("div", { key: 'cc3b6083e88bb99ec17edffbf95ec89e2bb27e97', class: "error-row", id: "error-message" }, h("span", { key: 'fe264a854aaebe481a6913275859ca57b1d61d0d', class: "error-icon" }, h("svg", { key: '1159f77b184d1888c5c5ebe6138070c66abb66e6', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '59975a202086127c2548843e842d33895d6ba1ff', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '11c79f296c1dce73beebd67eeefe3d71b17ee191', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9f146c96a38b14afb1919cf480224ee520ac16b0', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '2d326d0d72727dca4c4839fb5279323e556fbe04', class: "error-text" }, this.error))))));
     }
     static get style() { return afInputCss; }
 }, [257, "af-input", {
@@ -136,6 +136,6 @@ function defineCustomElement() {
 }
 
 export { AfInput as A, defineCustomElement as d };
-//# sourceMappingURL=p-PKWusChD.js.map
+//# sourceMappingURL=p-DOZPKyww.js.map
 
-//# sourceMappingURL=p-PKWusChD.js.map
+//# sourceMappingURL=p-DOZPKyww.js.map